//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>
你在标题中回答了自己的问题！ ‘=’时会看到’=’不是
原文链接：https://www.f2er.com/angularjs/142255.html>角度以外的地方：
输入视图值更改
>下一个摘要周期：
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);
});
};
});
