angularjs - 为什么 $scope.info 在自定义指令中的 ng-change 绑定较晚

Question

标签：

<grid-filter varible="info.M_id" on-change="searchMember()">
</grid-filter>

指示

app.directive("gridFilter", function () {
return {      
scope: {
varible: "=",
onChange: "&"
},
template: [
'<div class="input-append input-group">',
'<input class="form-control border-right-0" ng-change="onChange();"   no-special-char  class="form-control" ng-model="varible"    />',
'<div class="input-group-append">',
' <span class="input-group-text"><i class="fa-filter fa" aria-hidden="true"></i></span>',
' </div>',
' </div>'].join("")
};
})

控制器

$scope.searchMember = function () {      
    var data = $scope.info;
    Request.GetTabledata("SearchMemberData", data, null, $scope, true);
}

例如，在文本框上键入时hello。控制器不会$scope.info.M_id在第一次更改时绑定。假设我输入h，e然后$scope.info.M_id只绑定h

Answer 1

一种方法是对输入使用单向 ( "<") 绑定，并使用on-change事件作为输出：

app.directive("gridFilter", function () {
    return {      
            scope: {
            varible: "<",
            onChange: "&"
        },
        template: `
          <div class="input-append input-group">
            <input class="form-control border-right-0"
                   ng-change="onChange({$event: varible})"
                   no-special-char  class="form-control" ng-model="varible"  />
            <div class="input-group-append">
              <span class="input-group-text">
                <i class="fa-filter fa" aria-hidden="true"></i>
              </span>
            </div>
          </div>
        `
    };
})

用法：

<grid-filter  varible="info.M_id"
              on-change="info.M_id=$event; searchMember($event)">
</grid-filter>

$scope.searchMember = function (data) {      
    console.log(data);
}

这将避免双向 ( "=") 绑定固有的摘要循环延迟。

由于 Angular 2+ 没有双向"="（