angularjs - angularjs工厂中的ng-click函数

Question

我想通过单击事件更改 angularjs (1.x) 工厂中的变量。之后应该会出现暂停按钮。请你帮助我好吗：

带有 ng-click 的链接：

<li ng-click='navPlayMusic()'>
  <a class="glyphicon glyphicon-play music-control"></a>
</li>
<li ng-show="musicControl.playTitle === true" ng-click='navPauseMusic()'>
  <a class="glyphicon glyphicon-pause music-control"></a>
</li>

编辑：

控制器：

music.controller('musicController', function($scope, $rootScope, $location, musicControl) {
  ...
  $scope.musicControl = musicControl;
  $scope.navPlayMusic = function() {
     musicControl.playMusic();
  }
  ...
});

工厂：

music.factory('musicControl', function () {
return {
  playTitle: false,
};
this.playMusic = function() {
  return {
    playTitle: true
  };
 };
});

Answer 1

你可以试试这个

工厂：

    music.factory('musicControl', function() {
        var _flags = {  //Note: we intentionally declare properties here for easy to track how many flag we have in factory (optional)
            playTitle: false 
        }
        return {
            flags: _flags,
            playMusic: playMusic
        };

        function playMusic(dummyParam) {
            //handle play music logic
            //dummyParam will be 5 if called from HTML.

            //after done, enable the flag
            _flags.playTitle = true;
        };
    });

控制器：

    music.controller('musicController', function($scope, $rootScope, $location, musicControl) {

        //...

        $scope.musicFlags = musicControl.flags;   //map only property that we need to use. More than that is just make code hard to understand
        $scope.navPlayMusic = musicControl.playMusic; //just need to map function

        //...

    });

HTML：

    <li ng-click='navPlayMusic()'>
        <a class="glyphicon glyphicon-play music-control"></a>
    </li>
    <li ng-show="musicFlags.playTitle === true" ng-click='navPauseMusic(5)'>
        <a class="glyphicon glyphicon-pause music-control"></a>
    </li>

Answer 2

需要在返回对象中返回工厂函数的引用

music.factory('musicControl', function () {
return {
  playTitle: false,
  playMusic : playMusic 
};
function playMusic () {
  return {
    playTitle: true
  };
 };
});

Answer 3

 //try this
 music.factory('musicControl', function () {
 return {
    playTitle: false,
    playMusic : function() {
       return {
         playTitle: true
       };
     }; 
  };
});

Answer 4

你可以试试这个..

工厂：

music.factory('musicControl', function() {

        var playTitle = false;
        function playMusic() {
            return playTitle = true;

        }

        return {
            playMusic: playMusic
        }
    });

控制器：

$scope.isPause = false;
$scope.navPlayMusic = function() {
    $scope.isPause = $scope.musicControl.playMusic();
}

HTML：

<li ng-click='navPlayMusic()'>
<a class="glyphicon glyphicon-play music-control"></a>
</li>
<li ng-show="isPause === true" ng-click='navPauseMusic()'>
<a class="glyphicon glyphicon-pause music-control"></a>
</li>