angularjs 工厂中的 ng-click 函数
ng-click function in angularjs factory
我想通过单击事件更改 angularjs (1.x) 工厂中的变量。之后应该会出现暂停按钮。你能帮帮我吗:
link with 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
};
};
});
你需要return引用return对象中的工厂函数
music.factory('musicControl', function () {
return {
playTitle: false,
playMusic : playMusic
};
function playMusic () {
return {
playTitle: true
};
};
});
//try this
music.factory('musicControl', function () {
return {
playTitle: false,
playMusic : function() {
return {
playTitle: true
};
};
};
});
你可以试试这个
工厂:
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>
你可以试试这个..
工厂:
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>
我想通过单击事件更改 angularjs (1.x) 工厂中的变量。之后应该会出现暂停按钮。你能帮帮我吗:
link with 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
};
};
});
你需要return引用return对象中的工厂函数
music.factory('musicControl', function () {
return {
playTitle: false,
playMusic : playMusic
};
function playMusic () {
return {
playTitle: true
};
};
});
//try this
music.factory('musicControl', function () {
return {
playTitle: false,
playMusic : function() {
return {
playTitle: true
};
};
};
});
你可以试试这个
工厂:
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>
你可以试试这个..
工厂:
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>