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

編輯：

控制器：

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>