在ng-click中设置$ scope var in指令

我有这个元素：

指令：

 app.directive('address', [ function () { return { restrict: 'A', link: function($scope, element, attrs) { element.bind('click', function() { console.log($scope.dishInfo); $(".modal").modal(); }) } } } ]) 

当我在我的控制台中单击图像时，我的.modal Resource ： Resource { id=1, dishes={...}, category=[1],...}此代码：

 
 
 
 {{ dishInfo.id }} 
 
  

但是当模态窗口（点击图像后）打开时 – 我看到空块，没有id。 为什么？

Answer 1

我想到了

不是最好的做法

（如果你想以同样的方式继续这样做）

Plunker： http ：//plnkr.co/edit/VCewVczN4t54PQ6bf1Rh？p =preview Change

 ng-click="dishInfo = dish" 

至

 ng-click="$parent.dishInfo = dish" 

事实certificate，您必须以$ parent对象的forms显式引用作用域，因为ng-click会创建它自己的作用域。

最佳实践

Plunker： http ：//plnkr.co/edit/8VOFkOP1r1RfILZ7gKfc？p =preview

更改

 ng-click="dishInfo = dish" 

至

 ng-click="setDish(dish)" 

并在你的js文件中有一个名为setDish的方法

 $scope.setDish = function(dish) { $scope.dishInfo = dish; } 

Answer 2

您应该在指令中使用scope对象来实现此目的：

 app.directive('address', [ function () { return { restrict: 'A', scope : { dishinfo: "=" } link: function($scope, element, attrs) { element.bind('click', function() { console.log($scope.dishInfo); $(".modal").modal(); }) } } } ]) 

在你的部分：

并且您在控制器中声明了包含此部分的dish的值。

希望有所帮助。