我想弄清楚这个问题,但我没有运气。
这是我写的有用的傻瓜。请注意,当我使用$ http.get访问tags.json时,代码可以正常工作。
角度指令代码:
app.directive('tag', function($http) {
return {
restrict: 'E',
templateUrl: 'tag.html',
link: function (scope, el) {
scope.tags = [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
];
var test = [{ "text": "Tag9" },{ "text": "Tag10" }];
scope.loadTags = function (query) {
return $http.get('tags.json');
}
}
}
});
' tag.html'中的HTML:
<tags-input ng-model="tags">
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
<p>Model: {{tags}}</p>
工作图片:
很棒但是,我不想使用$http.get
,因为我已经有一个对象,里面有我想用来自动完成的标签。所以我试过这个
角度指令代码:
app.directive('tag', function($http) {
return {
restrict: 'E',
templateUrl: 'tag.html',
link: function (scope, el) {
scope.tags = [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
];
var test = [{ "text": "Tag9" },{ "text": "Tag10" }];
scope.loadTags = test;
}
}
});
我的&#39; tag.html&#39;中的HTML:
<tags-input ng-model="tags">
<auto-complete ng-model="loadTags"></auto-complete>
</tags-input>
<p>Model: {{tags}}</p>
但这根本不起作用。相反,我得到
TypeError: Cannot read property 'then' of undefined
at http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.0/ng-tags-input.min.js:1:5044
at http://code.angularjs.org/1.2.15/angular.js:13777:28
at completeOutstandingRequest (http://code.angularjs.org/1.2.15/angular.js:4236:10)
at http://code.angularjs.org/1.2.15/angular.js:4537:7 angular.js:9563
链接到我的Plunk: http://plnkr.co/edit/wEqVMf?p=info
答案 0 :(得分:18)
因此需要更改loadFunction以便它返回一个promise:
app.directive('tag', function($q) {
...
link: function(scope) {
$scope.loadTags = function() {
var deferred = $q.defer();
deferred.resolve([{ text: 'Tag9' },{ text: 'Tag10' }]);
return deferred.promise;
}
}
}
除此之外,您还需要修复标记,以便使用源选项:
<auto-complete source="loadTags()"></auto-complete>
这解决了我的问题