angularjsファクトリのng-click関数

Question

clickイベントでangularjs（1.x）ファクトリの変数を変更したいとします。その後、一時停止ボタンが表示されます。あなたは私を助けてもらえ：

NGクリックしてリンク：

<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> 

EDIT：

コントローラ：

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>