Question

我有以下服务：

app.factory('Words', ['$http', '$q', function($http, $q) {
    return {
        getWords: function() {
        var defer = $q.defer();
        $http.get('words.json', {cache: 'true'}).success(function(data) {
                defer.resolve(data);
            });
            return defer.promise;
        }
    };
}]);

我也有一个指令，我注入了上述服务。在json文件中，我有id和description的单词对象。

app.directive('word', ['Words', '$http', function(Words, $http) {
    var newWords;
    Words.getWords().then(function(data) {                                                                                                                                 
        newWords = data;
    }); 
    return {
        scope: {id: '@'},
        template : function(elem, attr) {
            var res;
            for (var i = 0; i <= newWords.length; i++) {
                if (i == attr.id) {
                    res = '<div>'+ newWords[i].description +'</div>';
                }
            }
            return res;
        }
    };
}]);

理想情况下，我想根据我在指令的id属性中传递的值返回单词的描述。我知道服务是异步的，但我不知道该怎么做。

Answer 1

您正在尝试在请求完成之前解析单词数组。

需要在then()中解析它们并返回字符串然后从模板函数返回promise

尝试

app.directive('word', ['Words',  function(Words) {

    return {
      scope: { id: '@'},
      template: function(elem, attr) {
        return Words.getWords().then(function(data) {

          var res;
          for (var i = 0; i <= data.length; i++) {
            if (i == attr.id) {
              res = '<div>' + newWords[i].description + '</div>';
            }
          }
          return res;
        });
      }
    };
  }
]);

另请注意，您在服务中使用$q反模式，因为$http会返回承诺

可以将其缩减为：

app.factory('Words', ['$http',  function($http) {
    return {
        getWords: function() {            
            return  $http.get('words.json', {cache: 'true'}).then(function(response) {
                return response.data;
            });               
        }
    };
}]);

如何在承诺完成后启动指令

1 个答案: