javascript - 将 Angular promise 绑定(bind)到 $scope 更改失败

Question

我在将 promise 绑定(bind)到 <autocomplete source='fnPromise()'> 时遇到问题使用 ngTagsInput 时。我不认为 ngTagsInput 有什么问题;我认为我对范围和 promise 的理解不够好，无法理解如何做我想做的事情。

我正常设置了指令:

<tags-input ng-model="token.ids.tags"
            class="form-field no-animate tag-input"
            placeholder="Delete unwanted IDs"
            addFromAutocompleteOnly="true">
    <auto-complete source="offerTags($query)"></auto-complete>
</tags-input>

问题出在 OfferTags() 函数上。这会返回一个 promise ，但因为我想用属于该 Controller $scope 的数组填充自动完成，所以我告诉 promise 只返回该 $scope 属性:

$scope.offerTags=function(query) {
    var deferred=$q.defer();

    var tags=$scope.token.ids.tags;
    deferred.resolve( tags);
    return deferred.promise;
}

但是，$scope.token.ids.tags 仅在服务返回后(页面加载后)才会填充。因此，offerTags 总是返回一个空数组。该 promise 不会使用 token.ids.tags 服务的新值进行更新。

编辑:Plunkr demonstrating problem

也就是说，如果您将 $scope.token.ids.tags 替换为静态数组，则自动完成功能可以工作，但只能工作该静态数组的内容。

抱歉，解释太长了……知道如何让它发挥作用吗？

Answer 1

您的服务应类似于以下内容:

app.factory('TokenService', function ($http) {
    return {
        loadTags: function (query) {
          return $http.get('/query', {
            params: {
             q: query
            }
          }).then(function(res){
            return res.data;
          });
        }
    }
});

将其放在范围内:

$scope.loadTags = TokenService.loadTags;

模板:

<tags-input ng-model="tags">
  <auto-complete source="loadTags($query)"></auto-complete>
</tags-input>