在我的指令中，我有一个 Controller 变量，当您按下指令中的按钮时，页面会递增。但是，调用 Controller 函数的下一行 scope.alertPage() 并未反射(reflect)此更改。请注意，当您单击按钮页面时仍会提示为 1!
我知道我可以通过在 Controller 中添加 $scope.$apply 来解决此问题，但随后我收到错误消息，指出摘要已经发生。
app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.page = 1;
$scope.alertPage = function() {
alert($scope.page);
}
})
app.directive('incrementer', function() {
return {
scope: {
page: '=',
alertPage: '&'
},
template: '<button ng-click="incrementPage()">increment page</button>',
link: function(scope, elem, attrs) {
scope.incrementPage = function() {
scope.page += 1;
scope.alertPage();
}
}
}
})
html模板:
<body ng-app='app' ng-controller='myCtrl'>
page is {{page}}
<incrementer page='page' alert-page='alertPage()'></incrementer>
</body>
最佳答案
它没有立即显示更新值的原因是因为 2 路绑定(bind)仅在摘要循环期间更新父(或指令的使用者范围)范围的绑定(bind)值。触发 ng-click 后会发生摘要循环。因此 Controller 中的 $scope.page 尚未更新。您可以通过使用 timeout 以多种方式解决此问题，这将延迟操作在摘要周期结束时运行。您也可以通过设置一个将值保存为 2-way bound 属性的对象来做到这一点。由于 2-way 绑定(bind)属性和父作用域共享相同的对象引用，您将立即看到更改。
方法 1 - 使用超时:
scope.incrementPage = function() {
scope.page += 1;
$timeout(scope.alertPage)
}
方法 2 - 绑定(bind)对象:
//In your controller
$scope.page2 = {value:1};
//In your directive
scope.incrementPage = function() {
scope.page.value += 1;
scope.alertPage();
}
方法3 - 使用带参数的函数绑定(bind)传递值:
//In your controller
$scope.alertPage = function(val) {
alert(val);
}
和
<!--In the view-->
<div incrementer page="page" alert-page="alertPage(page)"></div>
和
//In the directive
scope.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>关于angularjs - 更改指令中的 Controller 范围变量不会反射(reflect)在 Controller 功能中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27532978/