javascript - 重写指令以不使用隔离范围？

Question

我有两个简单的指令想要应用于一个元素。

当条件变为 true 时，该指令将焦点集中到特定元素:

.directive('focusOnCondition', function ($timeout) {
    return {
        restrict: 'A',
        scope: {
            condition: '=focusOnCondition',
        },
        link: function (scope, el, attr) {
            scope.$watch('condition', function (value) {
                if (value) {
                    $timeout(function () {
                        el[0].focus();
                    });
                }
            });
        }
    };
});

当用户按“enter”键时，该指令调用一个函数:

.directive('triggerOnEnter', function () {
    return {
        restrict: "A",
        scope: {
            func: '&triggerOnEnter'
        },
        link: function (scope, el, attr) {
            $(el).keypress(function (event) {
                if (event.which == 13) scope.func();
            });
        }
    };
})

这两个指令单独工作，但如果我尝试将它们应用于同一元素，它们就不起作用。例如:

<form ng-show="pastingResults">

    <textarea placeholder="Paste results and press 'enter'"
              ng-model="pastedResultData"
              trigger-on-enter="pasteResults()"
              focus-on-condition="pastingResults"></textarea>

    <button type="submit" ng-click="pasteResults()">Submit</button>
</form>

导致错误，[$compile:multidir] (...) 上的多个指令 (...)。

我该如何解决这个问题？我是 Angular JS 的新手，“将其放在隔离的范围内”是我在制定指令时唯一知道如何做的事情。我认为在不使用隔离范围的情况下一定可以实现这些，但我不知道如何实现。

谁能举个例子吗？

Answer 1

如果删除隔离范围，则可以通过直接使用传递给链接函数的 attrs 对象查看元素上的属性来访问选项，并在需要时结合 $eval 对其进行评估是:

app.directive('focusOnCondition', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, el, attr) {
      scope.$watch(attr.focusOnCondition, function (value) {
        if (value) {
          $timeout(function () {
            el[0].focus();
          });
        }
      });
    }
  };
});

和

app.directive('triggerOnEnter', function () {
  return {
    restrict: "A",
    link: function (scope, el, attr) {
      $(el).keypress(function (event) {
        if (event.which == 13) {
          scope.$eval(attr.triggerOnEnter);
        }
      });
    }
  };
});

这些可以在 http://plnkr.co/edit/1iOBNVlmRxm8HGRrObBd?p=preview 上看到。