angularjs – ngChange在值之前触发使其超出隔离范围

//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>

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

我的解决方案

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

//main controller
angular.module('myApp')
.controller('mainCtrl',function ($timeout) {
    return {
        scope: {
            searchModel: '=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>

你在标题中回答了自己的问题！ ‘=’时会看到’=’不是

>角度以外的地方：

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

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

ng-change添加$viewchangelistener,并在同一个循环中调用.
看到：
ngModel.js#L714和ngChange.js实施.

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

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

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

原文地址：https://www.jb51.cc/angularjs/142255.html