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上的实例。

＆＃13;

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);
      }
    }
  });

＆＃13;

<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>

＆＃13;

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

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

3 个答案: