Question

我想以动态的方式在以下自定义元素中添加ngshow ...怎么做？

<toggler on-enable="main.enable()" on-disable="main.disable()">
  <div style="width:100px;height:100px;background-color:#2fa">
    <on>On state</on>
    <off>Off state</off>
  </div>
</toggler>

cf.directive('toggler', function () {
    return {
        restrict: 'AE',
        scope: {
            state: true,
            onEnable: '&',
            onDisable: '&'
        },
        compile: function (elem, attrs) {
            var onElem = elem.find('on');
            var offElem = elem.find('off');
            // WANT TO DO THIS
            // onElem.ngShow = 'state';
            // offElem.ngShow = '!state';
        }
    };
});

Answer 1

你是以错误的方式做的。不要忘记AngularJS中的经验法则：当它不是强制性时避免使用DOM。

我猜<on>和<off>也是自定义指令，因为您不能简单地添加没有任何已定义行为的标记。那么，为什么不将ngShow属性直接放在这个指令中呢？然后，指令的控制器（参见documentation）将处理<on> / <off>和<toggler>之间的通信：

myApp.directive('toggler', function () {
    return {
        restrict: 'AE',
        scope: {
            state: '=',
        },
        controller : [
            '$scope',
            function ($scope) {
                this.isOn = function () {
                    return $scope.state;
                };
            },
        ],
    };
});

myApp.directive('on', function () {
    return {
        restrict: 'AE',
        require: '^toggler',
        template: '<div ng-show="isOn()" ng-transclude />',
        replace: true,
        scope: true,
        transclude: true,
        link : function ($scope, element, attributes, togglerController) {
            $scope.isOn = togglerController.isOn;
        },
    };
});

myApp.directive('off', function () {
    return {
        restrict: 'AE',
        require: '^toggler',
        template: '<div ng-hide="isOn()" ng-transclude />',
        replace: true,
        scope: true,
        transclude: true,
        link : function ($scope, element, attributes, togglerController) {
            $scope.isOn = togglerController.isOn;
        },
    };
});

Fiddle

这样，您就可以简单地对切换器进行单元测试，并在需要时扩展他的行为。

如何在编译/链接中添加ngshow指令？

1 个答案: