Question

我想为不同类型的文档实现 like 小部件。我尝试使用范围数据生成模板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
    };
  }

我发现“新闻”对象可以在控制台中打印，但结果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'
    });
  });
};

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

1 个答案: