带有父子控制器的Angular中的ng-switch
我有以下的HTML
<html ng-app="app" ng-csp=""> <body ng-controller="MainController" capture ng-class="view"> <div id="wrap" ng-switch="view"> <div id="login" ng-switch-when="login" ng-controller="SignInController"> my login code </div> <div id="project" ng-switch-when="project" ng-controller="ProjectController"> my login code </div> </div> </body> </html> 和我的angular码是
var app = angular.module("app", []); app.controller("MainController", ["$scope", function(t) { /* check session if exist or not if not show login*/ t.view='login'; }]),app.controller("SignInController", ["$scope","$http", function(t,$http) { t.signIn = function() { $http({ url: "/login/", data: { email: t.user.email,password:t.user.password }, method: 'POST', }).success(function (data) { console.log(data); //want to show project div t.$emit("view", "project"); }).error(function(err){ t.error = "Invalid Login"; }) }; }]),app.controller("ProjectController", ["$scope", function(t) { }]);
现在我的脾气不是成功的。 编辑：这里是punker链接http://plnkr.co/edit/I8EEFM8gdplUmNaZoYc6
当我点击loginbutton，我想显示项目切换。
有什么build议么
谢谢
问题是$范围不是你的控制器之间共享。 开始只有一个控制器，所以$ scope是共享的，如你所期望的。
改变你的ExampleController到这个：
var app = angular.module("switchExample", []); app.controller("ExampleController", ["$scope", function($scope) { $scope.selection ="settings"; $scope.signIn = function() { alert("click"); $scope.selection ="project"; } }]);
…并删除其他控制器和在HTML中的未使用的控制器的引用将显示'你好'，当你点击'login'
我想你错了。 ng-switch的语法是：
<ANY ng-switch="expression"> <ANY ng-switch-when="matchValue1">...</ANY> <ANY ng-switch-when="matchValue2">...</ANY> <ANY ng-switch-default>...</ANY> </ANY>
它消耗一个variables（$ scope的成员）并且与事件无关。
而不是t.$emit("view", "project"); 你应该做$scope.view = "project"; 。
请参阅文档底部的示例： https ： //docs.angularjs.org/api/ng/directive/ngSwitch
你有没有尝试过：
<div id="wrap" ng-switch on="view">
并设置：
$scope.view = "project";
<html ng-app="app" ng-csp=""> <body ng-controller="MainController" capture ng-class="view"> <div id="wrap" ng-switch on="view"> <div id="login" ng-switch-when="'login'" ng-controller="SignInController"> my login code </div> <div id="project" ng-switch-when="'project'" ng-controller="ProjectController"> my login code </div> </div> </body>
使用这个html