1

我有 2 个属性指令（两者的限制都设置为“A”），dir1并且dir2在两个不同的模块中定义。在一个应用程序（包括这两个模块）中，我们有一个元素可以添加这两个指令之一。我们目前进行了设置，因此这dir1是该元素的默认设置，但我们想要一种dir2“覆盖”该指令的方法。

我们想要使用的元素是另一个指令模板的一部分parentDir，所以我的第一个想法是为函数添加一些compile功能parentDir。for 的模板parentDir将包含在其中<div class="myElement" dir1="{{data}}"></div>，然后 compile 函数将如下所示：

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
    }
}

whereuseDir2将是parentDir指令的一个属性。这可以正常工作，但是 for 的值useDir2是一个插值，所以我不会用 . 查看我想要的值tAttrs.useDir2。

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

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

4

1 回答 1

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>'
  };
});

我做了一个小提琴。

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

于 2013-03-27T22:14:06.687 回答