Question

我正在开发一个使用Angular的颜色选择器，并试图结合我在其他地方看到的一些想法，以便编写将在用户选择颜色时调用的表达式。

<color-picker on-pick='something($color)'></color-picker>

我注意到所有内置指令都使用这种范围绑定方式，而不是说，例如，将函数直接传递给范围。

<color-picker on-pick='something'></color-picker>

此样式的一个示例是ngRepeat：

<li ng-repeat='item in items' ng-bind='$index'></li>

我理解something($color)表达式将使用父作用域而不是指令本身的作用域进行评估，这意味着必须在父作用域上使用$color属性才能正确评估。

但是，如果该指令具有隔离范围，则它不会看到父级。即使可以，我也不想将$color变量破坏到该范围内。

以类似的方式，我在某处看到使用&prop的范围绑定将评估父范围内的表达式，而不是指令的范围。但是，如果是这种情况，那么如何调用on-pick='something($color)'之类的调用作为$ color属性来自指令的范围，而something函数将在父节点上。范围？

ngRepeat的Angular文档将这些变量称为特殊变量＆＃39;但是，查看源代码表明它们被分配到从某个块映射系统生成的范围。我很快就匆匆过去那里。

Answer 1

您应该对指令的隔离范围使用"&"绑定。

因此，例如，如果您有以下指令：

app.directive("random", function(){
  return {
    scope: {
      onClick: "&"
    },
    template: "<button ng-click='genRandom()'>generate random</button>",
    link: function(scope){
      scope.genRandom = function(){
        scope.onClick({num: Math.random()});
      };
    }
  };
});

然后，在外部范围内，你可以这样做：

<random on-click="doSomethingWithRandom(num)"></random>

plunker

换句话说，当你调用"&"处理程序时，你会传递一个对象，其中每个＆＃34;键＆＃34;是一个可以从外部引用的变量（但仅在调用处理函数的上下文中）和每个＆＃34;值＆＃34; - 是设置为该变量的值。

修改Angular表达式中特殊变量的父作用域

1 个答案: