javascript - AngularJS - 模板中的指令

Question

我正在尝试找到动态创建使用指令创建的元素的子内容的最佳方法。

举个简单的例子，假设我有指令说创建了一个基本的 div子元素。

<div mydirective></div>

结果

<div mydirective><div></div></div>

该指令可能类似于:

angular.module('demo', [])
.directive('mydirective', function() {
    return {
        restrict: 'A',           
        template:   '<div></div>'
    }
})

然后说我想为这个指令创建一个“扩展”，使内部 div蓝色的。因为我不知道将来需要什么扩展，所以我不想切换模板或绑定(bind)任何特定属性。

我不知道其中哪些是可能的，或者正常的方法是什么......但是你可以

1) 向父元素添加一个附加指令(有点像 css)即

<div mydirective mybluedirective></div>

哪里mybluedirective查找内部 div 并对其进行操作？

或

2) 能否在模板中动态包含指令，例如

<div mydirective subdirective="mybluedirective"></div>

angular.module('demo', [])
.directive('mydirective', function() {
    return {
        restrict: 'A',           
        template:   '<div [[[THE SUBDIRECTIVE PROPERTY FROM SCOPE??]]></div>'
    }
})

有没有办法拦截预编译以注入(inject)指令？

我已经准备好的第三个选项是使用工厂和继承的类来完成指令的工作，但这似乎有点矫枉过正。

我猜有一个我不知道的简单方法，任何建议表示赞赏

编辑:

我认为我正在尝试做的是在编译之前动态修改模板以使用另一个指令。

Answer 1

选项 1 - 动态修改模板

如果想在编译前动态修改一个模板，可以使用模板函数:

HTML:

<div mydirective subdirective="mybluedirective"></div>

JS:

angular.module('demo', [])
.directive('mydirective', function() {
    return {
        restrict: 'A',           
        template:   function(element, attr) { 
             return '<div ' + attr.subdirective + '></div>'
        }
    }
})

选项 2 - 以编程方式访问模板

或者，您可以从 mydirective 公开一个 API，供 mybluedirective 使用。这个解决方案需要mydirective延迟编译(因为模板会手动编译)，更多的是考虑mydirective是如何设计和扩展的:

HTML

<div mydirective mybluedirective></div>

JS

angular.module('demo', [])
.directive('mydirective', function($compile) {

    return {
        restrict: 'A',           
        template:   '<div></div>',
        // we want a child scope so that we don't pollute the parent scope
        scope: true,
        controller: function($scope, $element) {
            var attrs = {};
            // expose an API to add attributes dynamically
            this.addAttr = function(attr, value) {
                attrs[attr] = value;
            }
            $scope.attrs = attrs;
        },
        compile: function(element, attr) {
            // save the template
            var template = element.find('div');

            // empty the contents so it is not compiled (we're manually compiling during link)
            element.empty();

            return function(scope, element, attr) {
                // add the attributes to the template
                angular.forEach($scope.attrs, function(value, key) {
                    template.addAttr(key, value);
                }
                // add the template to the DOM
                element.append(template);

                // link the template to scope
                $compile(template)(scope);
            }

        }

    }
})
.directive('mybluedirective', function() {
     return {
          restrict: 'A',
          require: 'mydirective',
          link: function(scope, element, attr, mydirectiveController) {
               mydirectiveController.addAttr('ng-class','blue');
          }
     }
});