Controller As
次の構文を使用して、この HTML のスニペットを取得しました。
<div ng-class="{'hide': !autoDeploy.uiVisibility.overlayLoaderVisible, 'show': autoDeploy.uiVisibility.overlayLoaderVisible}" />
<div ng-class="{'animate-top hide': !autoDeploy.uiVisibility.resultVisible, 'animate-bottom show': autoDeploy.uiVisibility.resultVisible}">
<button ng-click="autoDeploy.btn_extractFormData()">click</button>
この非常に簡素化されたコントローラーを使用します。
angular.module("gms.autoDeploy").controller('AutoDeployController', ['$scope', 'AutoDeployService',
function ($scope, AutoDeployService) {
var model = this;
// two-way data binding model to view
model.uiVisibility = AutoDeployService.getUIVisibility();
// Pull the data from our data model arrays
function btn_extractFormData() {
AutoDeployService.extractFormData();
}
model.btn_extractFormData = btn_extractFormData;
}
]);
そして私のサービスモジュールからのこのセグメント:
var uiVisibility = {
resultVisible: false,
overlayLoaderVisible: false
};
function getBuildResult() {
$http({
url: 'https://jenkins...com/job/...',
method: 'GET',
headers: {
'Accept': "*/*",
'Authorization': 'Basic ...'
}
})
.then(function (res) {
//stuff happens here
})
.catch(function (res) {
// stuff also happens here
});
setTimeout(function () {
uiVisibility.overlayLoaderVisible = false;
uiVisibility.resultVisible = true;
}, 1100);
}
// return this service (contains the objects that we want to be public)
return {
getUIVisibility: getUIVisibility,
extractFormData: extractFormData
};
}
ここでの私の問題は、上記のuiVisibility.overlayLoaderVisible
との値uiVisibility.resultVisible
が変更された場合setTimeout()
、UI で何も起こらないことですが、コンソール ロギングでテストしたため、実行されることがわかっています。タイムアウトを 2 行だけに置き換えると、それらは実行されますが、同期的であるため、ビューでそれぞれが更新される間に 1 秒ほどかかります。
私の質問:setTimeout()
非同期メソッドで値が変更されたときに、双方向のデータ バインディングを防止するメカニズムはありますか?
JavaScript のパスバイシェアリングを考慮して、2 つの値を連想配列に入れ、双方向バインディングを使用する他のすべてのオブジェクトで問題なく動作します。