为什么角度多次调用函数

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（）函数应该仅被调用两次，但是在conconle中，我看到了4次调用。 如果有人知道为什么？

Answer 1

发生这种情况的原因是在角度上存在双向数据绑定 。 为了解决这种问题，我做了以下工作：使用单向数据绑定。

 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版开始，我可以使用单向数据绑定。 这对我来说只是一件小事-它无法使用功能，因此我必须将角色移至控制器中。