的HTML

Question

我知道这里有关于隔离范围的十亿个问题，但我找不到与这个确切问题直接相关的问题。

我的控制器上有一个名为Model的属性，所以.. $scope.Model。然后我有一个需要与模型交互的指令。

我想给指令一个隔离范围，但这证明有点困难，因为这样做意味着我不再能访问该模型。我想我可以通过在隔离范围中将模型指定为双向绑定来解决这个问题，就像这样。

的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: []
   };
}]);

我真的输了，为什么这不起作用。根据我所见的所有隔离范围教程，这应该没问题。

注释

将控制器作为参数传递不是一种选择。我需要与之交互的第三方库已经这样做了，显然我不能在同一个HTML元素上执行两次。

Answer 1

您的使用不正确。这将有效：

<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: []
   };
}]);

Answer 2

实际上在范围内，属性名称对应于指令的隔离范围属性，在您的情况下，它是customDirective。你的代码应该是： -

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/

从隔离范围指令获取控制器模型

的HTML

的javascript

注释

2 个答案: