失败绑定Angular承诺$ scope更改

时间:2014-11-15 23:34:35

标签: javascript angularjs

使用ngTagsInput时,我遇到了将承诺绑定到<autocomplete source='fnPromise()'>的问题。我认为ngTagsInput没有任何问题;我认为我不了解范围和承诺,以便了解如何做我想做的事。

我正常设置指令:

<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,但是因为我想用这个控制器的$ 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总是返回一个空数组。使用token.ids.tags服务的新值不会更新承诺。

编辑:Plunkr demonstrating problem

即,如果用静态数组替换$ scope.token.ids.tags,则自动完成功能可以工作,但只能使用该静态数组的内容。

很抱歉有很长的解释...知道如何才能让它发挥作用?

1 个答案:

答案 0 :(得分: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>