javascript - copying values from parent scope to directive scope -

i new angularjs , wondering how go copying values in parent scope directive scope no bindings (2 separate instances). implementation goes is, newhosttemplate calling {{newhost.ipaddress}} want newhost directives scope , not parent.

host.directive('newhost', function(){     return {         restrict: 'e',         template: '<div ng-include="gettemplateurl()"></div>',         scope: true,         link: function(scope, element, attr) {             scope.newbox = function() {                 scope.gettemplateurl = function() {                     return 'hosts/newhosttemplate.html';                 }             }         }     } });  host.controller('hostscontroller', function($scope, $http, $window, $rootscope){     $rootscope.$on("$routechangeerror", function (event, current, previous, rejection) {         console.log("failed change routes");     });      $scope.newhost = {};     $scope.addnewhost = function() {         $http({             method  : 'post',             url     : 'http://192.168.0.99:5000/newhost',             data    : json.stringify($scope.newhost),  // pass in data strings         })         .success(function(data) {             console.log(data);             $scope.newbox()             $scope.newhost = {}             //on success want close modal , reset data             $scope.dismiss()         });     }; }); 

currently when run error saying newbox not function.

you want isolate scope. instead of scope: true, scope: {}.

any explicit input parent directive through defined scope variables:

scope: {     twowayboundinputone: '=',     staticstringinputtwo: '@',     functionthree: '&' } 

also, recommended architecture put reusable code, such ajax requests service. https://docs.angularjs.org/guide/services

inject service directive , controller same way inject $scope or $http.

your service may like:

/* global bz_app */ host.factory('hostsservice', ['$http', function ($http) {     return function () {         this.add = function () {             return $http({                 method  : 'post',                 url     : 'http://192.168.0.99:5000/newhost',                 data    : json.stringify($scope.newhost),  // pass in data strings             });         };          this.templateurl = function() {                 return 'hosts/newhosttemplate.html';         };     }; }]);  // in controller or directive can this, instance doesn't impacted other instances. scope.host = new hostsservice();