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

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

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

单次递增：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',function($scope) {
  $scope.count = 0;
  $scope.result = 0;

  $scope.increase = function(dircount) {
    $scope.result = dircount * $scope.count;
  };
});

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: '=',onClick: '&'
    },controller: function($scope,$timeout) {
      $scope.singleInc = 0;
      $scope.click = function() {
        $scope.singleInc++;
        $scope.counT += 2;
        $scope.onClick({
          item: $scope.singleInc
        });

      };
    }
  };
});

<html ng-app="myModule"> 

<head><title> Click-Counter Multiplier</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js" </script>
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin = "anonymous" >
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSqqxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqq1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
  <div ng-controller="myController">
    <p>Result: {{result}}</p>
    <p>From Controller: DOUBLE INCREMENT {{count}}</p>
    <hello-world coun-t="count" on-click="increase(item)"></hello-world>
    </br>
  </div>
</body>

</html>

出现此问题是因为双向（=）绑定在指令的隔离范围和父控制器的范围之间涉及摘要循环延迟。

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

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
        });    
      };
    }
  };
});

用法：

<hello-world coun-t="count" cont-t-change="count=$event" on-click="increase(item)">
</hello-world>

这使模板更加复杂，但避免了引起问题的摘要循环延迟。

这是Angular 2+使用香蕉盒式（[(coun-t)]=count）语法实现的方式。

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

a714618777 回答：自定义指令操作之前，控制器变量未更新

大家都在问