javascript - Angular Directive(指令)关注/取消关注按钮

Question

我正在尝试制作 Angular Directive(指令)按钮来关注和取消关注联赛 ID每个请求 $http.put 都进展顺利，但是 .then 方法控制台出现问题，显示错误并且该方法被拒绝

这里是代码

app.factory('FollowedLeagues', ['appConfig', '$http', '$q', function(appConfig, $http, $q){

    var FollowedLeagues = {};

    FollowedLeagues.follow = function (token, leagueID) {
      $http.put(appConfig.apiUrl + 'user/follow-league?token=' + token +'&league_id='+ leagueID +'&status=true' )
        .then(function(response){

          if (typeof response.data === 'object') {
            return response.data;
          } else {
            // invalid response
            return $q.reject(response.data);
          }

        },
        function(response) {
          // something went wrong
          return $q.reject(response.data);
        });
    };

    FollowedLeagues.unfollow = function (token, leagueID) {
      $http.put(appConfig.apiUrl + 'user/follow-league?token=' + token +'&league_id='+ leagueID +'&status=false' )
        .then(function(response){

          if (typeof response.data === 'object') {
            return response.data;
          } else {
            // invalid response
            return $q.reject(response.data);
          }

        },
        function(response) {
          // something went wrong
          return $q.reject(response.data);
        });
    };


    return FollowedLeagues;

  }]);
app.directive('fbFollowBtn', ['$rootScope', '$compile', 'FollowedLeagues', function ($rootScope, $compile, FollowedLeagues) {



    var getLeagueID = function(leagueID, followed){

      for(var i=0; i< followed.length; i++) {
        var fLeagues = followed[i]._id;
        if (fLeagues == leagueID) {
          return fLeagues;
        }

      }

    };//End-function.


    return {
      restrict: 'A',

      link:function(scope, element, attrs){

        scope.followed = $rootScope.meData.followedLeagues;
        scope.leagueid = attrs.leagueid;

        var follow_btn = null;
        var unfollow_btn = null;

        var createFollowBtn = function () {

          follow_btn = angular.element('<a href="javascript:void(0)" ng-disabled="submitting">Follow</a>');

          $compile(follow_btn)(scope);
          element.append(follow_btn);

          follow_btn.bind('click', function(e){
            scope.submitting = true;
            FollowedLeagues.follow($rootScope.userToKen, scope.leagueid)
              .then(function(data){
                scope.submitting = false;
                follow_btn.remove();
                createUnfollowBtn();

                console.log('followed Leagues Done :-) ', data);
              });
           // scope.$apply();

          });

        };


        var createUnfollowBtn = function () {
          unfollow_btn = angular.element('<a href="javascript:void(0)" ng-disabled="submitting">Unfollow</a>');
          $compile(unfollow_btn)(scope);
          element.append(unfollow_btn);

          unfollow_btn.bind('click', function (e) {
            scope.submitting = true;

            FollowedLeagues.unfollow($rootScope.userToKen, scope.leagueid)
              .then(function(data){
                scope.submitting = false;
                unfollow_btn.remove();
                createFollowBtn();

                console.log('followed Leagues Done :-) ', data);
              });
           // scope.$apply();
          });



        };



        scope.$watch('leagueid', function (val) {

          var leag = getLeagueID(scope.leagueid, scope.followed);


          if(typeof(leag) == 'undefined'){

            createFollowBtn();

          } else if(typeof(leag) !== 'undefined'){
            createUnfollowBtn();
          }//end if


        }, true);




      }
    };
  }]);

Answer 1

您必须在服务函数中返回 $http.put 函数。例如 Followedleagues.follow 函数:

FollowedLeagues.follow = function (token, leagueID) {
  return $http.put(appConfig.apiUrl + 'user/follow-league?token=' + token +'&league_id='+ leagueID +'&status=true' )
    .then(function(response){

      if (typeof response.data === 'object') {
        return response.data;
      } else {
        // invalid response
        return $q.reject(response.data);
      }

    },
    function(response) {
      // something went wrong
      return $q.reject(response.data);
    });
};