Question

//main controller
angular.module('myApp')
.controller('mainCtrl', function ($scope){
    $scope.loadResults = function (){
        console.log($scope.searchFilter);
    };
});

// directive
angular.module('myApp')
.directive('customSearch', function () {
    return {
        scope: {
            searchModel: '=ngModel',
            searchChange: '&ngChange',
        },
        require: 'ngModel',
        template: '<input type="text" ng-model="searchModel" ng-change="searchChange()"/>',
        restrict: 'E'
    };
});

// html
<custom-search ng-model="searchFilter" ng-change="loadResults()"></custom-search>

这是一个简化的指令来说明。当我输入输入时，我希望console.log中的loadResults能够准确地注销我已输入的内容。它实际上记录了一个字符，因为loadResults正在主控制器中的searchFilter var从指令接收新值之前运行。但是，在指令内部记录，一切都按预期工作。为什么会这样？

我的解决方案

在我的简单示例中了解了ngChange发生的事情之后，我意识到我的实际问题更复杂了，因为我实际传入的ngModel是一个对象，其属性我正在改变，并且另外，我使用此指令作为输入之一进行表单验证。我发现在指令中使用$ timeout和$ eval解决了我所有的问题：

//main controller
angular.module('myApp')
.controller('mainCtrl', function ($scope){
    $scope.loadResults = function (){
        console.log($scope.searchFilter);
    };
});

// directive
angular.module('myApp')
.directive('customSearch', function ($timeout) {
    return {
        scope: {
            searchModel: '=ngModel'
        },
        require: 'ngModel',
        template: '<input type="text" ng-model="searchModel.subProp" ng-change="valueChange()"/>',
        restrict: 'E',
        link: function ($scope, $element, $attrs, ngModel)
        {
            $scope.valueChange = function()
            {
                $timeout(function()
                {
                    if ($attrs.ngChange) $scope.$parent.$eval($attrs.ngChange);
                }, 0);
            };
        }
    };
});

// html
<custom-search ng-model="searchFilter" ng-change="loadResults()"></custom-search>

Answer 1

正如另一个答案中正确指出的那样，这种行为的原因是因为双向约束没有机会在时间searchFilter之前改变外部searchChange()，因此，loadResults()被调用。

然而，由于两个原因，解决方案非常糟糕。

一，调用者（指令的用户）不需要知道$timeout这些变通办法。如果不出意外，$timeout应该在指令中而不是在View控制器中完成。

两个 - OP也犯了一个错误 - 是使用ng-model带来了其他＆＃34;期望＆＃34;这些指令的用户。拥有ng-model意味着其他指令，如验证器，解析器，格式化程序和视图更改侦听器（如ng-change）可以与它一起使用。要正确支持它，需要require: "ngModel"，而不是通过scope: {}绑定到它的表达式。否则，事情将无法按预期发挥作用。

以下是它的完成方式 - 另一个例子，请参阅the official documentation创建自定义输入控件。

scope: true, // could also be {}, but I would avoid scope: false here
template: '<input ng-model="innerModel" ng-change="onChange()">',
require: "ngModel",
link: function(scope, element, attrs, ctrls){
  var ngModel = ctrls; // ngModelController

  // from model -> view
  ngModel.$render = function(){
    scope.innerModel = ngModel.$viewValue;
  }

  // from view -> model
  scope.onChange = function(){
    ngModel.$setViewValue(scope.innerModel);
  }
}

然后，ng-change只会自动生效，支持ngModel的其他指令也会自动生效，例如ng-required。

Answer 2

你在标题中回答了自己的问题！在'='不是

时会看到'&'

角度以外的地方：

输入视图值更改
下一个摘要周期：

ng-model值更改并触发ng-change()

ng-change添加了一个$ viewChangeListener并被称为同一个循环。看到： ngModel.js#L714和ngChange.js实施。

当时$scope.searchFilter尚未更新。 Console.log的旧值
下一个摘要周期： searchFilter由数据绑定更新。

更新：仅作为POC，您需要1个额外周期来传播值，您可以执行以下操作。请参阅另一个anwser（@NewDev以获得更清洁的方法）。

.controller('mainCtrl', function ($scope, $timeout){
    $scope.loadResults = function (){
        $timeout(function(){
           console.log($scope.searchFilter);
        });
    };
});

ngChange在值超出隔离范围之前触发

2 个答案: