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

Modify ng-show within directive template from link

本文关键字：ng-show 链接 修改 指令      更新时间：2023-09-26

我有一个指令元素：

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，我希望在我的 ng-show 中将 hideItem 设置为 true。

网页结构：

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

演示

您实际上可以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'通过为您的控制器分配一个名称并向其附加变量来更易于管理

你必须看它： 

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

仅当您的服务未执行服务器端请求时，才会向服务器发送垃圾邮件。

我认为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指令的方法知道这一点。

相关文章：