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

【问题标题】：ng-click function in angularjs factoryangularjs工厂中的ng-click函数
【发布时间】：2017-07-28 01:12:16
【问题描述】：

我想通过单击事件更改 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
  };
 };
});

【问题讨论】：

您似乎没有将musicControl 工厂注入您的控制器
@Phil 感谢您的回答。现在我将 musicControl 注入控制器，但它仍然无法正常工作。
更改出厂返回playMusic函数。工厂的客户只能访问返回对象的属性。 this 对象的属性将被忽略。

标签： angularjs angular-factory

【解决方案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>

【讨论】：

这行得通。非常感谢你。通过这个答案学到了很多东西。
还有一个问题：如何在函数中添加参数，并将它们从html代码传递给工厂？
您好，您可以像往常一样在 HTML 中设置参数。我编辑了代码。基本上，在控制器中，您将 navPlayMusic 设置为 playMusic 的引用，这意味着当您调用 navPlayMusic 时，您实际上调用了 playMusic 并将参数传递给它。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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>

【讨论】：