Javascript AngularJS中不同控制器之间的实际切换按钮
我想创建一个简单的按钮,在两个Javascript AngularJS中不同控制器之间的实际切换按钮,javascript,html,angularjs,Javascript,Html,Angularjs,我想创建一个简单的按钮,在两个divs之间切换,如下所示: 有可能吗 当然……有多种方法。您通常希望看到的第一种方式是使用服务在应用程序的各个组件之间共享数据 angular.module('myapp').service('ButtonService', function(){ this.active = 'A'; this.toggleActive = function(){ this.active = this.active === 'A' ?
div
s之间切换,如下所示:
有可能吗
当然……有多种方法。您通常希望看到的第一种方式是使用服务在应用程序的各个组件之间共享数据
angular.module('myapp').service('ButtonService', function(){
this.active = 'A';
this.toggleActive = function(){
this.active = this.active === 'A' ? 'B' :'A';
}
});
angular.module('myapp').controller('A', function($scope, ButtonService){
$scope.state = ButtonService;
});
// repeat in B controller
然后在视图中执行以下操作:
<div ng-show="state.active == 'A'">
<button ng-click="state.toggleActive()">Toggle Div's</button>
切换Div's
charlietfl提到的完全正确。但是您也可以使用$rootScope
来实现相同的功能,但通常不建议使用$rootScope
。因此,您可以使用以下方法
创建一个类似于GlobalController
的全局控制器,并将其添加到body
或html
标记中,以便其作用域在整个应用程序中都可用。在那里,您可以添加一种方法在不同控制器之间切换:
var-app=angular.module(“sa”,[]);
应用控制器(“全局控制器”,功能($scope){
$scope.globalData={
当前:“A”
};
$scope.toggleSection=函数(){
$scope.globalData.current=$scope.globalData.current==“A”?“B”:“A”;
};
});
app.controller(“A”,函数($scope){});
应用控制器(“B”,函数($scope){})代码>
我是A。
我是B。
在“切换”时只隐藏div“A”,而不隐藏div“B”。我只显示了一个控制器和div/按钮…除了ng show
中的值之外,其他都是相同的,这就是我想要的!非常感谢你!