javascript - 从链接修改指令模板内的 ng-show

Question

我有一个指令元素:

return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template:   '<ul>' +
                        '<li ng-show="hideItem">Home</li>' +
                        '<li ng-show="hideItem">Products</li>' +
                        '<li ng-show="!hideItem">Cart</li>' +
                        '<li ng-show="hideItem">Contact Us</li>' +
                    '</ul>',  
        link: function(scope, element, attrs) {

            var shouldHide = myService.getData();


            if (shouldHide === true) {
               scope.hideItem = true
            }

        }
    };

链接函数执行对服务的调用，结果为 true 或 false。

如果为 true，我希望在我的 ng-show 中将 hideItem 设置为 true。

<小时/>

HTML 结构:

<section ng-controller="NavigationController">
    <i class="home"></i>
    <i class="bell"></i>
    <i class="phone"></i>
    <my-directive></my-directive>
    <button>Submit</button>
</section>

Answer 1

DEMO

你实际上可以只是vm.hideItem = myService.getData();因为你无论如何都想要 bool 值

return {
        restrict: 'E',
        replace: true,
        controllerAs: 'vm',
        transclude: true,
        template:   '<ul>' +
                        '<li ng-show="vm.hideItem">Home</li>' +
                        '<li ng-show="vm.hideItem">Products</li>' +
                        '<li ng-show="!vm.hideItem">Cart</li>' +
                        '<li ng-show="vm.hideItem">Contact Us</li>' +
                    '</ul>',  
        link: function(scope, element, attrs, vm) {

            vm.hideItem = myService.getData();

        },
        controller: function(){

        }
    };

我添加了 controllerAs: 'vm' 通过为 Controller 分配名称并向其附加变量，它更易于管理