问题

I know that there are a billion questions about isolate scope on here, but I could not find one that directly relates to this exact issue.

I have a property on my controller called Model, so .. $scope.Model. I then have a directive that needs to interact with the Model.

I am wanting to give the directive an isolate scope, but this is proving a bit difficult because doing that means I no longer have access to the model. I thought I could solve this by specifying the model as a two-way binding in the isolate scope, like this.

html

<body ng-app="app" ng-controller="HomeController">
   <div custom-directive="Model.Tags"></div>
</body>

javascript

app.directive('customDirective', ['$parse', function($parse) {
   return {
      restrict: "A",
      scope: {
         customDirective: "=Model"
      },
      link: function(scope, element, attributes){
         // need to access the controller's "$scope.Model" here for some things.
         var model = scope.$eval(attributes.customDirective);
      }
   }
}])
.controller('HomeController', ['$scope', function($scope) {
   $scope.Model = {
      Id: "items/1",
      Name: "Some Model Object",
      Tags: []
   };
}]);

I'm really lost as to why this doesn't work. According to all of the isolate scope tutorials I've seen, this should be fine.

notes

Passing the controller as a parameter is not an option. A third party library that I need to interact with already does this, and apparently I can't do that twice on the same HTML element.

回答1:

Your usage is incorrect. This will work:

<body ng-app="app" ng-controller="HomeController">
   <div custom-directive="Model"></div>
</body>


app.directive('customDirective', [function() {
   return {
      restrict: "A",
      scope: {
         customDirective: "="
      },
      link: function(scope, element, attributes){
          console.log(scope.customDirective); // this is the $scope.Model due to 2-way binding
      }
   }
}])
.controller('HomeController', ['$scope', function($scope) {
   $scope.Model = {
      Id: "items/1",
      Name: "Some Model Object",
      Tags: []
   };
}]);

回答2:

actually under scope, property name corresponds to the directive's isolate scope property in your case it is customDirective. SO your code should be:-

var app=angular.module("app",[]);
app.directive('customDirective', ['$parse', function($parse) {
 return {
   restrict: "A",
   scope: {
     customDirective: "=model"
   },
   link: function(scope, element, attributes){
     // need to access the controller's "$scope.Model" here for some things.
      console.log(scope.customDirective);
   }
 }
}]);
app.controller('HomeController', ['$scope', function($scope) {
 $scope.Model = {
   Id: "items/1",
   Name: "Some Model Object",
   Tags: []
};
}]);

http://jsfiddle.net/4bb4dozv/

来源：https://stackoverflow.com/questions/25750675/getting-controller-model-from-isolate-scope-directive

标签

angularjs

angularjs-directive

Getting controller model from isolate scope directive

问题

html

javascript

notes

回答1:

回答2: