javascript - AngularJS - $watch 内部的初始化取决于两个模型

Question

我有一个异步 JS 函数（即一个 http 请求，但是一个请求，这是通过 Java 绑定直接调用我的 JavaFX 应用程序），它返回一些结果并将其放入模型属性中，modelAttribute1.

我$watch在其他一些模型上也有一个函数modelAttribute2，它使用第一个模型，即：

scope.$watch(modelAttribute2, function(newVal, oldVal){
    scope.$apply(function(){
        // newVal is correct, but modelAttribute1 is not yet initialized!
        scope.scriptText = loadFile(newVal, scope[modelAttribute1]); 
    });
});

问题是在我从 Java 获得结果之前正在执行这个监视表达式。

那么有没有一种方法可以解决这个问题，比如创建一个 Promise 并监听它的计算完成？

Answer 1

一个有承诺的解决方案：

var d1 = $q.defer(), d2 = $q.defer();

scope.$watch("modelAttribute1", function(newVal) {
    if( newVal != null ) d1.resolve(newVal);
});
scope.$watch("modelAttribute2", function(newVal) {
    if( newVal != null ) d2.resolve(newVal);
});

$q.all([d1, d2]).then(function(arr) {
    // here scope.modelAttribute1 = arr[0],
    //      scope.modelAttribute2 = arr[1]
    scope.scriptText = loadFile(arr[1], arr[0]);
});

Answer 2

由于 http 请求是异步的，我们可以用 promise 包装它，例如：

   var data = //...<from http>
   var deferred = $q.defer();
   deferred.resolve(data);
   deferred.then(function(arr) {   
      modelAttribute1 = arr;
    });

作为旁注：

我不知道你是否使用深度观察，设置标志true：

scope.$watch(modelAttribute2, function(newVal, oldVal){
    scope.$apply(function(){
        // newVal is correct, but modelAttribute1 is not yet initialized!
        scope.scriptText = loadFile(newVal, scope[modelAttribute1]); 
    });
}, true);