在 link 的指令模板中修改 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
            }

        }
    };

link 函数执行对服务的调用，结果为 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(); 因为无论如何您都需要布尔值

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' 通过为您的控制器分配名称并为其附加变量，它更易于管理

Answer 2

你一定要看：

scope.$watch(function(){
     return myService.getData();
}, function(newValue){
    scope.hideItem = newValue;
});

这仅适用于您的服务不执行服务器端请求的情况，否则您将向服务器发送垃圾邮件。

Answer 3

我认为 getData 方法可以从应用程序的任何位置调用。

并且您想跟踪指令中的这些更改。在这种情况下，您可以使用 callback.

jsfiddle.

上的实例

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope, myService) {
    $scope.resolve = function() {
      myService.getData().then(function() {
        console.log('resolved from button resolve');
      })
    }
    myService.getData().then(function() {
      console.log('resolved from controller loading');
    })
  })
  .directive('exampleDirective', function(myService) {
    return {
      restrict: "E",
      scope: {
        value: "="
      },
      template: `<div>hidden={{hidden}} value={{value}} <span ng-show="hidden">ng-show="hidden"</span><span ng-show="!hidden">ng-show="!hidden"</span></div>`,
      link: function(scope) {
        scope.hidden = false;
        myService.addCallback(function(hideItem) {
          scope.hidden = hideItem;
          console.log('callback resolved with value ' + scope.value + ' and hide is ' + hideItem);
        });
      }
    }
  })
  .service('myService', function($q, $timeout) {
    var callbacks = [];
    return {
      getData: function() {
        var defered = $q.defer();
        //simulate $http call
        $timeout(function() {
          defered.resolve();
          //simulate answer from server 
          var res = Math.round(Math.random() * 10) >= 5;
          angular.forEach(callbacks, function(c) {
            //call callback with result
            $q.resolve(res, c);
          });
        }, 1000);

        return defered.promise;
      },
      addCallback: function(callback) {
        callbacks.push(callback);
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController" id="ExampleController">
    <button ng-click="resolve()">
      call getData
    </button>
    <example-directive value="12"></example-directive>
    <example-directive value="'ab'"></example-directive>
  </div>
</div>

当你在任何地方使用你的 getData 指令的方法时都知道。

在 link 的指令模板中修改 ng-show

Modify ng-show within directive template from link

javascript

angularjs

angularjs-directive

angularjs-scope

angular-directive