模型更改后角度視圖不更新

Question

我遇到了AngularJS模型更改後更新視圖元素的問題。我有一個有2個字段的表單，我希望用戶填寫其中的一個，並讓另一個自動填充（在ng-blur上）。我發佈的示例使用人名和社會安全號碼（SSN）。通過填寫SSN，應用程序執行HTTP調用來獲取該SSN的名稱，反之亦然。

這裏的角指令：

define([ 
    'angular' 
], function (angular) { 
    angular.module('form.formDirective', []) 
     .directive('formDirective', formDirective); 

formDirective.$inject = ["$rootScope", "$sce", "$document", "$translate", "$filter", "$http"]; 

    function formDirective($rootScope, $sce, $document, $translate, $filter, $http) { 

    var myLink = function ($scope, $element, attrs) { 

     $scope.setFieldsForName = function(name) { 
      var url = 'http://some.rest.api/getSsn/' + name; 
      $http.get(url) 
       .success(function(data, status, headers, config) { 
        $scope.personSsn = data.SSN; 
       }) 
       .error(function (data, status, headers, config) { 
        // no-op 
       }); 
     }; 

     $scope.setFieldsForSsn = function(ssn) { 
      var url = 'http://some.rest.api/getName/' + ssn; 
      $http.get(url) 
       .success(function(data, status, headers, config) { 
        $scope.personSsn = data.name; 
       }) 
       .error(function (data, status, headers, config) { 
        // no-op 
       }); 
     }; 

    }; 

    return { 
     templateUrl: 'form.directive.html', 
     restrict : 'EA', 
     scope  : { 
     field   : '=', 
     model   : '=', 
     renameChildKey: "=", 
     preview  : "=", 
     delete  : '&', 
     ngDisabled : "=", 
     isEditData : "=" 
     }, 
     replace : true, 
     link  : myLink 
    }; 

    } 
}); 

下面是相關的HTML：

<!-- Name --> 
<div class="form-group"> 
    <input type="text" 
     id="{{getId(0)}}" 
     class="form-control" 
     placeholder="Name" 
     ng-model="personName" 
     ng-blur="setFieldsForName(personName);"/> 
</div> 

<!-- SSN --> 
<div class="form-group"> 
    <input type="text" 
     id="{{getId(1)}}" 
     class="form-control" 
     placeholder="SSN" 
     ng-model="personSsn" 
     ng-blur="setFieldsForSsn(personSsn);"/> 
</div> 

這完全適用於一種情況，例如，填寫姓名和取得SSN，或者反過來。但是第一個嘗試之後的任何嘗試都會調用函數，它會獲取數據，更新合適的範圍變量，但輸入字段值不會反映變量的更新值。

我環顧四周，發現$ scope。$ apply（）是一個流行的解決方案，但是它不適用於我，我得到一個錯誤提示代碼已經處於摘要（）階段，所以它不能運行apply（）。

如果你有一個想法是怎麼回事，我會很感激任何幫助！

Answer 1

對於示波器方法，您應該使用$手錶，因爲事件將在模糊期間觸發。所以$ watch會查找任何更改綁定表達式，特別是每個更改。

define([ 
    'angular' 
], function (angular) { 
    angular.module('form.formDirective', []) 
     .directive('formDirective', formDirective); 

formDirective.$inject = ["$rootScope", "$sce", "$document", "$translate", "$filter", "$http"]; 

    function formDirective($rootScope, $sce, $document, $translate, $filter, $http) { 

    var myLink = function ($scope, $element, attrs) { 
      //modified 
     $scope.$watch.setFieldsForName = function(name) { 
      var url = 'http://some.rest.api/getSsn/' + name; 
      $http.get(url) 
       .success(function(data, status, headers, config) { 
        $scope.personSsn = data.SSN; 
       }) 
       .error(function (data, status, headers, config) { 
        // no-op 
       }); 
     }; 
     //modified 
     $scope.$watch.setFieldsForSsn = function(ssn) { 
      var url = 'http://some.rest.api/getName/' + ssn; 
      $http.get(url) 
       .success(function(data, status, headers, config) { 
        $scope.personSsn = data.name;  
       }) 
       .error(function (data, status, headers, config) { 
        // no-op 
       }); 
     }; 

    }; 

    return { 
     templateUrl: 'form.directive.html', 
     restrict : 'EA', 
     scope  : { 
     field   : '=', 
     model   : '=', 
     renameChildKey: "=", 
     preview  : "=", 
     delete  : '&', 
     ngDisabled : "=", 
     isEditData : "=" 
     }, 
     replace : true, 
     link  : myLink 
    }; 
    } 
    }); 

探索$ watch的詳細信息。 HERE