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#L714ngChange.js实施.

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

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

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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...