Почему привязка $scope.info задерживается при изменении ng в пользовательской директиве

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+ нет двусторонней"=") обязательна