为什么不能在angular指令中使用异步响应生成模板html

Question

我想为不同类型的文档实现一个类似的小部件。我尝试使用范围数据来生成模板html代码，以下是我所做的：

  angular.module('app.common')
    .directive('like',['favoritesResource','session','$q', like]);
  function like(favoritesResource, session, $q, $scope) {
    var news = $q.defer();
    function link(scope, el) {
      //console.log(scope);
      news.resolve(scope.vm.theNews);
    };
    function getTemplate(el, attrs) {
      loadNews().then(function(news) {
        console.log(news);
        favoritesResource.isLike(session.getCurrentUser.id, {docType: news.type, docId: news.id}, function(status) {
          if (status == 'like'){
            return '<button class="fa fa-heart" ng-click="vm.likeIt()">like</button>';
          }else {
            return '<button class="fa fa-heart-o" ng-click="vm.likeIt()">like</button>'
          }
        });
      });
    };
    function loadNews() {
      return news.promise;
    }
    return {
      link: link,
      restrict: 'E',
      template: getTemplate(),
      replace: true
    };
  }

我发现"news"对象可以在控制台中打印，但结果html是<like></like>，而不是<button class="fa fa-heart" ng-click="vm.likeIt()">unlike</button>或<button class="fa fa-heart-o" ng-click="vm.likeIt()">like</button>，有人能告诉我怎么了吗？或者你对编写这样的小部件有什么建议吗？

更新：

这个小部件在一个用于显示文档内容的控制器中，这是我的控制器：

  angular
    .module('app.news')
    .controller('ReadNewsController', ReadNewsController);
  ReadNewsController.$inject = ['theNews', '$scope', 'favoritesResource', 'session'];
  function ReadNewsController(theNews, $scope, favoritesResource, session) {
    var vm = this;
    vm.theNews = theNews;
    vm.likeIt = function() {
      favoritesResource.like(session.getCurrentUser.id, {docType:theNews.type, docId: theNews.id});
    };
    vm.unlikeIt = function() {
      favoritesResource.disLike(session.getCurrentUser.id, {docType:theNews.type, docId: theNews.id});
    };
    vm.isLikeIt = function() {
      favoritesResource.isLike(session.getCurrentUser.id, {docType:theNews.type, docId: theNews.id});
    };
  }

路线：

var module = angular.module('app.news', ['ui.router', 'app.common', 'app.data']);
  module.config(appConfig);
  appConfig.$inject = ['$stateProvider'];
  function appConfig($stateProvider) {.state('app.readNews', {
        url: '/news/read/:id',
        templateUrl: 'app/modules/news/read/news.html',
        controller: 'ReadNewsController as vm',
        resolve: {
          theNews: function(newsResource, $stateParams) {
            return newsResource.get({id: $stateParams.id}).$promise.then(function(item){
              item.type = 'news'; //for 'like' directive
              return item;
            })
          }
        }
      })

Answer 1

使用ng-class向模板添加条件逻辑要简单得多。然后加载数据并设置范围变量isLiked

function like() {
    return {
      link: link,
      restrict: 'E',
      template: '<button class="fa" ng-class="{'fa-heart': isLiked,'fa-heart-o': !isLiked }" ng-click="vm.likeIt()">like</button>',
      replace: true
    };
  }
 function link(scope, el) {
  loadNews().then(function(news) {
    favoritesResource.isLike(session.getCurrentUser.id, {docType: news.type, docId: news.id}, function(status) {
        scope.isLiked = status === 'like'
    });
  });
};