Question

以

的形式给出HTML

<p ng-repeat="item in items" my-directive="item">{{item.Description}}</p>

我想在ng-show内动态添加my-directive。它似乎并不像它可能那么容易。如果my-directive是一个元素而不是一个属性，它可以简单地通过一个模板来完成，但是对于属性来说，不存在相同的支持。

我的第一次尝试使用了Add directives from directive in AngularJS所述的$compile服务。但是，该方法依赖于指令的优先级高于任何其他指令，因此应用于ng-repeat之前。

我目前的做法是手动复制ng-show的来源：

.directive('myDirective', ['$animate', function ($animate) {
    function toBoolean(value) {
        if (typeof value === 'function') {
            value = true;
        } else if (value && value.length !== 0) {
            var v = angular.lowercase("" + value);
            value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
        } else {
            value = false;
        }
        return value;
    }

    return {
        scope: true,
        link: function(scope, elem, attrs) {
            scope.$watch("myWatchExpression",
                function(isActive) {
                    $animate[toBoolean(isActive) ? 'removeClass' : 'addClass'](elem, 'ng-hide');
                }
            );
        }
    };
}])

然而，这显然不是一个好的长期解决方案，因为它需要在内部角度变化时更新自定义指令。

有没有办法可以将指令作为注入请求并将其应用于元素（不会破坏更高优先级的指令，如ng-repeat）？

编辑以提供上下文

我正在尝试创建的指令用于标签项。理想情况下，标记看起来像：

<tab-container>
    <button ng-repeat="tab in tabs" tab-button="{{tab.id}}">{{tab.name}}</button>
    <div ng-repeat="tab in tabs" tab-view="{{tab.id}}"><ng-include src="{{tab.template}}"/></div>
</tab-container>

因此，我希望ng-click上的ng-class和tab-button指令以及ng-show上的tab-view。

在不直接编译或使用模板的情况下从指令添加ng-show

0 个答案: