为什么 $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+ 没有双向 ("=") 绑定，它还有一个额外的好处，那就是使将来更容易迁移到 Angular 2+。