Question

我在两个不同的模块中定义了2个属性指令（限制在两者上设置为'A'），dir1和dir2。在一个应用程序（包括这两个模块）中，我们有一个元素可以添加这两个指令中的一个。我们目前正在进行设置，以便dir1是此元素的默认值，但我们希望有一种方法让dir2“覆盖”此指令。

我们想要执行此操作的元素是另一个指令parentDir的模板的一部分，所以我首先想到的是为compile的{{1}}函数添加一些功能。 parentDir的模板将包含在其中parentDir，然后编译函数将如下所示：

<div class="myElement" dir1="{{data}}"></div>

其中function(tElement, tAttrs) { if ("true" == tAttrs.useDir2) { var myElement = tElement.find("div.myElement"); myElement.removeAttr("dir1"); myElement.attr("dir2", "{{data}}"); } return function (scope, element, attrs) { // link stuff } }是useDir2指令的属性。这样可以正常工作，但parentDir的值是一个插值，所以我不会用useDir2查看我想要的值。

我考虑过设置2指令的优先级，但是每个指令都必须知道对方的优先级，以确保它们彼此正确相关。您不希望有人进入一个模块并更改其他内容的优先级，并打破此功能。由于这两个指令在不同的模块中，我希望它们彼此完全无知。

我希望我已经清楚地解释了我的问题。我只是不确定如何去做，并认为我可能会错过一些简单的方法来做到这一点。感谢。

Answer 1

我相信你需要像你提出的那样做。如果需要在运行时（即通过控制器）定义它，在链接函数中$observe该属性，然后在更改值时更改并重新编译元素内容。像这样：

app.directive('parentDir', function($compile) {
  return {
    link: function(scope, element, attr) {
        attr.$observe('parentDir', function(value) {
            var div = angular.element('<div ' + value + '></div>');
            element.find('div').remove();
            element.append(div);
            $compile(div)(scope);
        });
    },
    template: '<input type="checkbox" ng-model="val"/> Use directive 2: ' + 
            '<div></div>'
  };
});

我做了fiddle。

当然，我简化了parentDir，你可能需要缓存DOM的原始状态，这样你就可以安全地重新编译它。

如何处理来自不同模块的竞争指令

1 个答案: