在指令中更改控制器作用域变量不会反映在控制器功能中

一尘不染

在指令中更改控制器作用域变量不会反映在控制器功能中

angularjs

在我的指令中，我有一个控制器变量，页面在您按指令中的按钮时会增加。但是，scope.alertPage()调用控制器功能的下一行不会反映此更改。请注意，当您单击按钮页面时，其警报仍为1！

我知道我可以通过在控制器中添加$ 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>

阅读 241

2020-07-04

共1个答案

一尘不染

它之所以不能立即显示更新的值，是因为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 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>

2020-07-04