Question

我想制作一个自定义ng-if，但找不到应该如何做的好例子。

我的目标是：

<div my-if="someText">....</div>

我想要扩展到

<div ng-if="true|false">....</div>

true|false取决于someText。有一个简单的方法吗？

Answer 1

要用ng-if替换指令，需要重新编译。我得到它的最简单方法是：

(function () {
   angular.module('enheter').directive('toggleIf',['$compile', function($compile) {
            return {
                restrict: 'A',
                compile: function(el,attr) {
                    var toggleName = attr.toggleIf;
                    var toggleOn = toggleName === "sometext";
                    el.attr('ng-if', toggleOn);
                    el.removeAttr('toggle-if');
                    var fn = $compile(el);
                    return function(scope) {
                        fn(scope);
                    };
                }
            };
        }]); 
})();

上面的指令首先获取toggleIf属性的值。定义toggleOn的值的部分将更复杂，但这显示了我的目标。然后，我只需将ng-if添加到元素中，然后移除toggle-if。如果toggle-if未被删除，则会出现无限循环，因为对$compile的调用会一次又一次地执行此函数。

Answer 2

<div ng-if="showText ? true : false">....</div>

但是再一次，如果你的showText是一个布尔值，它将做同样的事情。

有没有一种简单的方法来扩展angularjs中的属性指令？

2 个答案: