Kopieren von Werten aus dem übergeordneten Bereich in den Richtlinienbereich

Question

Ich bin neu in AngularJS und habe mich gefragt, wie ich die Werte in meinem übergeordneten Bereich in meinen Anweisungsbereich ohne Bindungen (2 separate Instanzen) kopieren würde. Momentan läuft meine Implementierung so, wie es ist, mit meinem newHostTemplate, das {{newHost.ipAddress}} aufruft, aber ich will, dass newHost vom Direktivenumfang und nicht vom Elternteil ist.

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 to 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 as strings 
     }) 
     .success(function(data) { 
      console.log(data); 
      $scope.newBox() 
      $scope.newHost = {} 
      //on success we want to close the modal and reset the data 
      $scope.dismiss() 
     }); 
    }; 
}); 

Derzeit, wenn ich dies ausführen, bekomme ich eine Fehlermeldung, dass newBox keine Funktion ist.

Answer 1

Sie möchten den Bereich isolieren. Anstelle von scope: true, do scope: {}.

Jede explizite Eingabe von der Mutter der Richtlinie über definierte Umfang Variablen wäre:

scope: { 
    twoWayBoundInputOne: '=', 
    staticStringInputTwo: '@', 
    functionThree: '&' 
} 

Auch Architektur empfohlen ist wieder verwendbaren Code, wie zum Beispiel AJAX-Anforderungen in einen Dienst zu stellen. https://docs.angularjs.org/guide/services

Injizieren Sie den Dienst in die Direktive und den Controller auf die gleiche Weise, wie Sie $ scope oder $ http injizieren.

Ihr Service kann wie folgt aussehen:

/* 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 as strings 
      }); 
     }; 

     this.templateUrl = function() { 
       return 'hosts/newHostTemplate.html'; 
     }; 
    }; 
}]); 

// then in your controller or directive you can do this, to get an instance that doesn't get impacted by other instances. 
scope.host = new HostsService();