Fonction ng-click dans l'usine angularjs

Question

Je souhaite modifier une variable dans une fabrique angularjs (1.x) avec un événement click. Après cela, le bouton de pause devrait apparaître. Pourriez-vous s'il vous plaît me aider:

Le lien avec ng-cliquez sur:

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

Le contrôleur:

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

L'usine:

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

Answer 1

Vous pouvez essayer cette

usine:

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; 
     }; 
    }); 

Controller:

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

vous devez renvoyer la référence de la fonction d'usine dans l'objet de retour

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

Vous pouvez essayer ..

usine:

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

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

     } 

     return { 
      playMusic: playMusic 
     } 
    }); 

contrôleur

:

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