Question

说我有这样的模板：

<awesome>{{scopeVariable1}} - {{scopeVariable2 | filteryThing}}</awesome>

在我的awesome指令中，我需要知道模板上存在scopeVariable1和scopeVariable2，以便我向他们添加监视并知道何时重新运行css转换{ {1}}。

有没有办法以某种角度方式捕获这两个变量，所以我不必运行正则表达式来搜索它们？我只需要在awesome元素中查看所有范围变量。

Answer 1

我创建了this example。我希望这是你正在寻找的。

appModule.directive('awesome', function() {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        val1: "=",
        val2: "="
      },
      template: "<div>{{val1}} - {{val2}}</div>",
      link: function(scope, element, attrs){ 

        var triggerUpdate  = function(oldVal, newVal){  
            if (oldVal !== newVal) {
                //place your update here
                alert("changed!");
            }
        }
        scope.$watch('val1',triggerUpdate);
        scope.$watch('val2',triggerUpdate);
  }
};

}）;

我使用隔离范围，因此您可以在一个控制器的同一视图中多次重复使用该指令。如果您不想这样做，只需观看您感兴趣的范围属性，在不知道您将使用此指令的上下文的情况下，很难知道哪一个是最佳的。

Answer 2

在awesome指令的compile步骤中，我最终这样做了：

watchableKeys = _.uniq $(tElement).text()
  # find all angular mustache-style tags
  .match(///{{ #grab the first {{
    \s* # whitespace
    [\w\.\s* \|]+ # capture words, whitespaces, pipes
    \s* # trailing whitespace
    }} # mustaches
    ///g)
  #... only get the first word, since that's the scope value to watch for.
  .map((x)-> x.match(/[\w\.]+/)[0])

然后在post link函数中，我对每个watchableKeys和$watch进行迭代。

for key in watchableKeys
  scope.$watch key, (newValue) ->
    # do things

获取元素上使用的所有范围变量

2 个答案: