angular $ scopeドメインイベントからのスコープダイジェストの更新

Question

私はウィンドウイベントを通してインスタンス化される角度$スコープ変数を持っています。 $ 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" 
/> 

角度スニペットは：

$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-モデルは、変更を反映するが、$の範囲を渡していません。 ng-change関数のbenefitsFromDateに更新された値がありますか？

Answer 1

これらのアップデートを処理するときに$timeoutモジュールを使用し、$scope.$apply()への呼び出しを避けます。

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

Answer 2

「ドットルール」については角度が細かいことが分かりました。

私がしなければならなかったことは、自分のデータ値に別のものを付けることでした。

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

それともas

ng-controller="appController as vm" 

を使用するようにコントローラを宣言することができます