Question

我有这个小提琴，显示一个现在有警报的指令。还有一个有警报的控制器。这一切都正常，除了因为按钮上显示的文本丢失了绑定。有什么想法可以帮到我吗？

<div ng-app="directiveApp" ng-controller="MainController">
 <button ng-click="doStuff()" unsaved-warning-trigger>
    {{buttonText}}
 </button>
</div>

var app = angular.module("directiveApp", []);

app.directive('unsavedWarningTrigger',
    function() {
        return {
            priority: 1,
            terminal: true,
            link: function (scope, element, attr) {
                var clickAction = attr.ngClick;
                element.bind('click',function () {
                    if (window.confirm("Sure?")) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
    }
);

MainController = function($scope) {
  $scope.buttonText = 'bound button';

  $scope.doStuff = function () {
    alert("doing stuff");
  };
}

http://jsfiddle.net/9tWr7/3/

Answer 1

由于将“terminal”属性设置为“true”，因此发生了这种情况。通过执行此操作，您将阻止稍后执行的任何其他指令（即使它们不是显式的）。

考虑您的要求以及是否确实需要设置

'terminal: true'

否则，您应该遵循不同的范围方法。

我附上了一个jsFiddle，您可以通过删除该属性来查看绑定工作：

http://jsfiddle.net/RJq3N/

关于终端和优先级属性的好文章：

How to understand the `terminal` of directive?

编辑：

但是，要实现所需的全部功能，可以将指令编写为：

    app.directive('unsavedWarningTrigger',
     function() {
        return {
            priority: 1,
            terminal: true,
           link: function (scope, element, attr) {                   

               element.text(scope.buttonText);

                var clickAction = attr.ngClick;
                element.bind('click',function () {
                    if (window.confirm("Sure?")) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
    }
);

见jsFiddle：

http://jsfiddle.net/KsT5f/

考虑到使用此实现，按钮文本仅在指令链接时设置一次。由于与buttonText的绑定已被属性'terminal：true'破坏，如果您希望在更改buttonText时更新按钮文本，则需要为其设置$ watch并执行element.text（范围） .buttonText）。

最佳。

Answer 2

'terminal: true'可防止执行该元素优先级较低的所有指令。但它也会阻止子元素的指令被执行。

Angular为{{expression}}添加了一个指令。在您的情况下，该指令将添加到文本节点，即button元素的子节点。但由于terminal: true，该指令永远不会被执行。

失去对指令的约束力

2 个答案:

How to understand the `terminal` of directive?