定义隔离范围时,指令行为会发生变化

时间:2013-03-15 19:49:41

标签: javascript angularjs angularjs-directive angularjs-scope

我有一个javascript网格库slickgrid的指令。

http://plnkr.co/edit/KWZ9i767ycz49hZZGswB?p=preview

我想要做的是将所选行传递回控制器。所以我想使用隔离范围(使用'=')来实现控制器和指令之间的双向绑定。

如果我在没有任何范围声明的情况下定义指令,那么一切都有效:

<slickgrid id="myGrid" data="names" selected-item="selectedItem"></slickgrid>

app.directive('slickgrid', function() {
  return {
  restrict: 'E',
  replace: true,
  //scope: {
  //  selectedItem: '='
  //},
  template: '<div></div>',
  link: function($scope, element, attrs) {
   ...
    var redraw = function(newScopeData) {
    grid.setData(newScopeData);
    grid.render();
};
$scope.$watch(attrs.data, redraw, true);

但如果我取消注释上面的行(app.js中的第19-21行),它看起来像$ scope。$ watch正在观看attrs.data对象正在调用重绘但是attrs.data正在传入未定义。

我的分析可能是错误的,但我不确定为什么定义范围会导致这种情况。有人可以解释为什么会这样吗?

.nathan。

1 个答案:

答案 0 :(得分:1)

如果定义了隔离范围,那么指令中的任何$ watch都将查找隔离范围内的attrs.data评估结果。 attrs.data计算为字符串names,因此$ watch正在查找隔离范围内的$scope.names,该范围不存在。 (如果没有隔离范围,该指令使用与MainCtrl相同的范围,并且存在$scope.names。)

要使用隔离范围,您需要定义另一个隔离范围属性以传入names

scope: {
  selectedItem: '=',
  data: '='
},
...
$scope.$watch('data', redraw, true);

HTML可以保持不变。