angular 来自 dom 事件的 $scope 摘要更新

Question

我有一个 angular $scope 变量，它通过 window 事件实例化。 $scope 变量已正确显示给用户，但未通过 ng-model 设置更新。奇怪的是 ng-change 具有我可以用来手动设置范围变量的正确值。

我真的不明白为什么会这样。

事件处理程序：

document.addEventListener('updateSearchBar', handleUpdate);
function handleUpdate(eventData) {
    $scope.benefitsFromDate = eventData.detail.fromDate;
    $scope.$apply();
}

前端：

<input 
    type="date" 
    name="fromDate" 
    ng-change="updateBenefitsFromDate(benefitsFromDate)" 
    ng-model="benefitsFromDate" 
/>
<input 
    type="button" 
    value="Search" 
    class="btn btn-default" 
    ng-click="searchDocuments()" 
    ng-disabled="isSearchingDocuments"
/>

Angular 片段：

$scope.updateBenefitsFromDate = function(change) {
    console.log($scope.benefitsFromDate); //still has old value
    console.log(change); //has updated value when param is the $scope variable
    //$scope.benefitsFromDate = change; //only way to update
 };

$scope.searchDocuments = function() {
    //ng-model never updates the variable when the value is changed and uses the instantiated value
    console.log($scope.benefitsFromDate);
};

为什么 ng-model 不反映更改，但在 ng-change 函数中传递 $scope.benefitsFromDate 具有更新值？

Answer 1

我在处理这类更新时使用 $timeout 模块，避免调用 $scope.$apply()。

$timeout(function() {
  $scope.benefitsFromDate = eventData.detail.fromDate;
});

Answer 2

我了解到 angular 对 "dot rules" 很挑剔。

我所要做的就是为我的数据值加上其他前缀。

$scope.data = {};
$scope.data.benefitsFromDate = ...;

或者您可以声明您的控制器使用 as

ng-controller="appController as vm"

angular 来自 dom 事件的 $scope 摘要更新

angular $scope digest update from a dom event

angularjs

angularjs-scope

dom-events