Question

我正在尝试创建一个添加一些html代码的指令，但还添加了其他属性/指令。

使用下面的代码，确实添加了ng-class属性，但似乎angular不再将其识别为指令。它在那里，但它没有效果。

我怎样才能让它发挥作用？感谢。

角色代码：

angular.module('myModule', [])
    .directive('menuItem', function () {
        return {
            restrict: 'A',
            template: '<div ng-if="!menuItem.isSimple" some-other-stuff>{{menuItem.name}}</div>'
                     +'<a ng-if="menuItem.isSimple" ng-href="{{menuItem.link}}">{{menuItem.name}}</a>',
            scope: {
                menuItem: '='
            },
            compile: function (element, attrs) {
                element.attr('ng-class', '{active : menuItem.isActivated()}');
            }
        }
    });

和html：

<li menu-item="menuItem" ng-repeat="menuItem in getMenuItems()" />

修改 @ Abdul23的解决方案解决了这个问题，但是出现了另一个问题：当模板包含其他指令（如ng-if）时，这些指令不会被执行。似乎问题刚刚开始。

是否也可以使模板内的指令工作？
或者使用compile函数而不是template参数插入html。由于我希望基于某个值menuItem.isSimple进行简单的区分（并且此值不会更改），或许我只能插入特定于该情况的html而不使用ng-if，但是如何？

Answer 1

您需要使用$compile服务来实现此目的。见this answer.

对于你的情况，它应该是这样的。

angular.module('myModule', [])
.directive('menuItem', function ($compile) {
    return {
        restrict: 'A',
        template: '<a ng-href="{{menuItem.link}}">{{menuItem.name}}</a>',
        scope: {
            menuItem: '='
        },
        compile: function (element, attrs) {
              element.removeAttr('menu-item');
              element.attr('ng-class', '{active : menuItem.isActivated()}');
             var fn = $compile(element);
             return function(scope){
                        fn(scope);
                     };
        }
    }
});

使用另一个指令

1 个答案: