angularjs – 更改指令中的控制器范围变量不会反映在控制器功能中

前端之家收集整理的这篇文章主要介绍了angularjs – 更改指令中的控制器范围变量不会反映在控制器功能中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的指令中,我有一个控制器变量,当你按下指令中的按钮时,页面增加.但是,调用控制器函数的下一行scope.alertPage()不会反映此更改.请注意,当您单击按钮页面时仍然会被警告为1!

我知道我可以通过在控制器中添加$scope.$apply来解决这个问题.但是我得到的错误是已经发生了摘要.

Plunker:http://plnkr.co/edit/QSnBzM3gvJI9vnCkC19T?p=preview

  1. app = angular.module('app',[]);
  2.  
  3. app.controller('myCtrl',function($scope) {
  4.  
  5. $scope.page = 1;
  6.  
  7. $scope.alertPage = function() {
  8. alert($scope.page);
  9. }
  10.  
  11. })
  12.  
  13. app.directive('incrementer',function() {
  14. return {
  15. scope: {
  16. page: '=',alertPage: '&'
  17. },template: '<button ng-click="incrementPage()">increment page</button>',link: function(scope,elem,attrs) {
  18. scope.incrementPage = function() {
  19. scope.page += 1;
  20. scope.alertPage();
  21. }
  22. }
  23. }
  24. })

HTML模板:

  1. <body ng-app='app' ng-controller='myCtrl'>
  2. page is {{page}}
  3.  
  4. <incrementer page='page' alert-page='alertPage()'></incrementer>
  5. </body>
它没有立即显示更新值的原因是因为2路绑定仅在摘要周期期间更新父级(或指令的使用者范围)范围的绑定值.触发ng-click后会发生摘要循环.因此控制器中的$scope.page尚未更新.您可以通过使用超时来以多种方式解决这个问题,该超时会将操作推迟到摘要周期结束时运行.您也可以通过设置一个将值保存为双向绑定属性的对象来完成此操作.由于双向绑定属性和父作用域共享相同的对象引用,因此您将立即看到更改.

方法1 – 使用超时:

  1. scope.incrementPage = function() {
  2. scope.page += 1;
  3. $timeout(scope.alertPage)
  4. }

方法2 – 绑定对象:

  1. //In your controller
  2. $scope.page2 = {value:1};
  3.  
  4. //In your directive
  5. scope.incrementPage = function() {
  6. scope.page.value += 1;
  7. scope.alertPage();
  8. }

方法3 – 使用带参数的函数绑定传递值:

  1. //In your controller
  2. $scope.alertPage = function(val) {
  3. alert(val);
  4. }

  1. <!--In the view-->
  2. <div incrementer page="page" alert-page="alertPage(page)"></div>

  1. //In the directive
  2. scope.incrementPage = function() {
  3. scope.page += 1;
  4. scope.alertPage({page:scope.page});
  5. }
  1. app = angular.module('app',function($scope) {
  2.  
  3. $scope.page = 1;
  4. $scope.page2 = {value:1};
  5. $scope.alertPage = function() {
  6. alert($scope.page);
  7. }
  8. $scope.alertPage2 = function() {
  9. alert($scope.page2.value);
  10. }
  11.  
  12. })
  13.  
  14. app.directive('incrementer',function($timeout) {
  15. return {
  16. scope: {
  17. page: '=',alertPage: '&',page2:"=",alertPage2: '&'
  18. },attrs) {
  19. scope.incrementPage = function() {
  20. scope.page += 1;
  21. scope.page2.value += 1;
  22. $timeout(function(){ scope.alertPage() });
  23. scope.alertPage2();
  24. }
  25. }
  26. }
  27. })
  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  2. <div ng-app="app" ng-controller="myCtrl">
  3. <div incrementer page="page" alert-page="alertPage()" page2="page2" alert-page2="alertPage2()"></div>
  4. </div>

猜你在找的Angularjs相关文章