Angularjs 在自定义指令操作之前未更新控制器变量

我是angularJS的新手（我知道学习angularJS很晚，但现在总比没有好吧？），我一直在玩一些简单的任务。 最近，我试图更深入地研究数据是如何在控制器、自定义指令和自定义指令的控制器之间交换和更新的。 在一个简单的实现中，我尝试在自定义指令控制器中创建一个click计数器，它将从主控制器启动count变量，并在自定义指令中对该变量执行count操作。在自定义指令中有两个计数操作。第一个操作是count+1，第二个操作是另一个变量+2。然后，通过单击按钮“单击”，调用来自主控制器的函数，然后将两个计数相乘并生成结果

在这里，我面临的问题是：

单一增量：1 双倍增量：2 结果：0（应为：2）

单一增量：2 双倍增量：4 结果：4（应为：8）

单一增量：3 双倍增量：6 结果：12（应为：18）

单一增量：4 双倍增量：8 结果：24（应为：32）反之亦然

这意味着自定义指令的控制器中的“$scope.count”在“onClick（）”事件中递增，但主控制器的“$scope.count”在“onClick（）”事件中不递增，而是保留以前的值，尽管双向绑定都在起作用

如何克服这个问题

var myApp=angular.module（'myModule'，[]）；
myApp.controller（'myController'，函数（$scope）{
$scope.count=0；
$scope.result=0；
$scope.increase=函数（dircount）{
$scope.result=dircount*$scope.count；
};
});
myApp.directive（'helloWorld'，function（）{
返回{
限制：“AEC”，
替换：正确，
模板：“来自指令的增量：单个增量{{singleInc}}}次”+
“点击”，
范围：{
计数：'='，
onClick:“&”
},
控制器：函数（$scope，$timeout）{
$scope.singleInc=0；
$scope.click=function（）{
$scope.singleInc++；
$scope.counT+=2；
$scope.onClick({
项目：$scope.singleInc
});
};
}
};
});

单击计数器乘数
出现此问题是因为双向（
=
）绑定涉及指令的隔离范围和父控制器范围之间的摘要周期延迟

避免延迟的一种方法是使用表达式（
&
）绑定进行更改：

myApp.directive('helloWorld', function() {
  return {
    restrict: 'AEC',
    replace: true,
    template: `
        <div>
          <div>Increment from Directive: SINGLE INCREMENT {{singleInc}} times
          </div>
          <div>
            <button ng-click="click()">CLICK</button>
          </div>
        </div>
    `,
    scope: {
      counT: '<',
      counTChange: '&',
      onClick: '&'
    },
    controller: function($scope, $timeout) {
      $scope.singleInc = 0;
      $scope.click = function() {
        $scope.singleInc++;
        $scope.counT += 2;
        $scope.counTChange({$event: $scope.counT});
        $scope.onClick({
          item: $scope.singleInc
        });    
      };
    }
  };
});

myApp.directive（'helloWorld'，function（）{
返回{
限制：“AEC”，
替换：正确，
模板：`
指令的增量：单个增量{{singleInc}}次
点击
`,
范围：{
计数：“出现问题是因为双向（
=
）绑定涉及指令的隔离范围和父控制器范围之间的摘要周期延迟

避免延迟的一种方法是使用表达式（
&
）绑定进行更改：

myApp.directive('helloWorld', function() {
  return {
    restrict: 'AEC',
    replace: true,
    template: `
        <div>
          <div>Increment from Directive: SINGLE INCREMENT {{singleInc}} times
          </div>
          <div>
            <button ng-click="click()">CLICK</button>
          </div>
        </div>
    `,
    scope: {
      counT: '<',
      counTChange: '&',
      onClick: '&'
    },
    controller: function($scope, $timeout) {
      $scope.singleInc = 0;
      $scope.click = function() {
        $scope.singleInc++;
        $scope.counT += 2;
        $scope.counTChange({$event: $scope.counT});
        $scope.onClick({
          item: $scope.singleInc
        });    
      };
    }
  };
});

myApp.directive（'helloWorld'，function（）{
返回{
限制：“AEC”，
替换：正确，
模板：`
指令的增量：单个增量{{singleInc}}次
点击
`,
范围：{
计数：“感谢@georgeawg的回复。当控制器和指令位于单个文件中时，您的解决方案就像一个符咒。但是，当它们位于不同的文件中时，控制器的变量不会因您的动态“感谢@georgeawg的回复”而改变。当控制器和指令位于单个文件中时，您的解决方案就像一个符咒一样工作但是，当它们位于不同的文件中时，控制器的变量不会因您的动态响应而改变