Question

我有以下部分代码。

var app = angular.module('app', []);

app.controller('DemoCtrl', function($scope, accessService) {
  $scope.isPageAccessible = function(pageCode) {
    return accessService.checkAccess(pageCode);
  }; 
});

app.factory('accessService', function(){
  var availableRoles = ['PROFILE'];
  var service = {};
  service.checkAccess = function (role) {
        console.log('Check role: ' + role);
        return availableRoles.some(function (element) {
            return element == role;
        });
    };
  return service;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul class="nav nav-tabs" ng-app="app" ng-controller="DemoCtrl">
  <li class="active"><a href="#">Home</a></li>
  <li><a ng-show="isPageAccessible('PROFILE')" href="#">Profile</a></li>
  <li><a ng-show="isPageAccessible('MESSAGE')" href="#">Messages</a></li>
</ul>

我为什么角度调用函数isPageAccessible（）多次感到惊讶。在我的脑海中，函数isPageAccessible（）应该只调用两次，但在concole中我看到4个调用。如果有人知道为什么？

Answer 1

这是因为角度为that。为了解决这个问题，我做了以下几点：使用单向数据绑定。

var app = angular.module('app', []);

app.controller('DemoCtrl', function($scope, accessService) {
  $scope.isProfile = accessService.checkAccess('PROFILE');
  $scope.isMessage= accessService.checkAccess('MESSAGE');
});

app.factory('accessService', function(){
  var availableRoles = ['PROFILE'];
  var service = {};
  service.checkAccess = function (role) {
        console.log('Check role: ' + role);
        return availableRoles.some(function (element) {
            return element == role;
        });
    };
  return service;
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<ul class="nav nav-tabs" ng-app="app" ng-controller="DemoCtrl">
  <li class="active"><a href="#">Home</a></li>
  <li ng-if="::isProfile"><a href="#">Profile</a></li>
  <li ng-if="::isMessage"><a href="#">Messages</a></li>
</ul>

从版本1.3开始，我可以使用单向数据绑定。这对我来说只是微不足道的事情 - 它不能与函数一起使用，我必须将角色转移到控制器中。

为什么角度多次调用函数

1 个答案: