AutoComplete bằng ngTagsInput không thể đọc thuộc tính 'then' của undefined

Question

Tôi đang cố gắng tìm ra vấn đề này nhưng tôi không có may mắn.

Đây là plunker tôi đã viết hoạt động. Lưu ý rằng mã hoạt động hoàn hảo khi tôi truy cập tags.json bằng cách sử dụng $ http.get.

góc Chỉ thị Mã số:

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'); 
     } 
    } 
    } 
}); 

HTML bên trong 'tag.html':

<tags-input ng-model="tags"> 
    <auto-complete source="loadTags($query)"></auto-complete> 
</tags-input> 
<p>Model: {{tags}}</p> 

Working Pic:

---

vĩ đại nhưng, tôi DON' T muốn sử dụng $http.get vì tôi đã có một đối tượng thứ có các thẻ bên trong nó mà tôi muốn sử dụng để tự động hoàn thành. SO Tôi cố gắng này

góc Mã Chỉ thị:

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; 
    } 
    } 
}); 

HTML bên trong 'tag.html' của tôi:

<tags-input ng-model="tags"> 
    <auto-complete ng-model="loadTags"></auto-complete> 
</tags-input> 
<p>Model: {{tags}}</p> 

NHƯNG này không làm việc ở tất cả. Thay vào đó tôi nhận được

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 

Liên kết đến Plunk tôi: http://plnkr.co/edit/wEqVMf?p=info

Answer 1

Vì vậy, các loadFunction cần phải thay đổi để nó trả về một lời hứa:

app.directive('tag', function($q) { 
    ... 
    link: function(scope) { 
     $scope.loadTags = function() { 
      var deferred = $q.defer(); 
      deferred.resolve([{ text: 'Tag9' },{ text: 'Tag10' }]); 
      return deferred.promise; 
     } 
    } 
} 

Bên cạnh đó, bạn cần phải sửa đánh dấu của bạn để nó sử dụng tùy chọn nguồn:

<auto-complete source="loadTags()"></auto-complete> 

Điều này đã khắc phục được sự cố của tôi