它之所以不能立即显示更新的值,是因为2方式绑定仅在摘要周期内才更新父(或指令的使用者范围)范围的绑定值。摘要循环在触发ng-
click之后发生。因此
$scope.page,控制器中尚未更新。您可以通过多种方式解决此问题,方法是使用
timeout,它将延迟操作在摘要周期结束时运行。您也可以通过设置一个将值保存为2向绑定属性的对象来实现。由于2向绑定属性和父范围共享同一对象引用,因此您将立即看到更改。
方法1-使用超时:
scope.incrementPage = function() { scope.page += 1; $timeout(scope.alertPage) }方法2-绑定对象:
//In your controller $scope.page2 = {value:1};//In your directive scope.incrementPage = function() { scope.page.value += 1; scope.alertPage(); }方法3-使用带有参数的函数绑定传递值:
//In your controller$scope.alertPage = function(val) { alert(val);}和
<!--In the view--><div incrementer page="page" alert-page="alertPage(page)"></div>
和
//In the directivescope.incrementPage = function() { scope.page += 1; scope.alertPage({page:scope.page}); }app = angular.module('app', []);app.controller('myCtrl', function($scope) { $scope.page = 1; $scope.page2 = {value:1}; $scope.alertPage = function() { alert($scope.page); } $scope.alertPage2 = function() { alert($scope.page2.value); }})app.directive('incrementer', function($timeout) { return { scope: { page: '=', alertPage: '&', page2:"=", alertPage2: '&' }, template: '<button ng-click="incrementPage()">increment page</button>', link: function(scope, elem, attrs) { scope.incrementPage = function() { scope.page += 1; scope.page2.value += 1; $timeout(function(){ scope.alertPage() }); scope.alertPage2(); } } }})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script><div ng-app="app" ng-controller="myCtrl"> <div incrementer page="page" alert-page="alertPage()" page2="page2" alert-page2="alertPage2()"></div> </div>


