使用链接更改 ng-switch答案

【问题标题】：Use links to change ng-switch使用链接更改 ng-switch
【发布时间】：2013-06-06 12:00:14
【问题描述】：

如何使用链接来触发 ng-switch？

我当前的html：

<ul class="nav nav-list bs-docs-sidenav affix sidenav">
    <li><a href="#" ng-click="page='resources'">Resources</a></li>
    <li><a href="#" ng-click="page='users'">Users</a></li>

</ul>

<div ng-switch on="page">
    <div ng-switch-when="resources">
        <h1>resources Div</h1>
    </div>
    <div ng-switch-when="users">
        <h1>Users</h1>
    </div>
    <div ng-switch-default>
        <h1>Default</h1>
    </div>
</div>

我的控制器：

function Ctrl($scope) {
    $scope.page = 'users';
}

我错过了什么？

【问题讨论】：

当你运行这段代码时会发生什么？
什么都没有。如果我将更改 page 的表达式更改为更改页面的函数，然后 console.log($scope.page) 我可以看到 page 正在更改，但不会发生切换。
在这里工作 - jsfiddle.net/Dogbert/uYMSN
我想知道为什么这对我不起作用。
@Dogbert sn-p 工作正常。我们可以为这个问题选择一个答案吗？

标签： angularjs ng-switch

【解决方案1】：

我偶然发现了一个类似的问题，并通过使用对象而不是作用域上的属性来解决它，这样这些值就不会被 ng-switch 指令覆盖。

所提出的问题与此解决方案之间的区别在于，我将页面值从 ng-switch 范围内更改。

在控制器中声明导航对象

$scope.nav = {
                 page : 1
             }

HTML

<div ng-switch="nav.page">
<div ng-switch-when="1">
    First page
    <a href="#" ng-click="nav.page=2">Resources</a>
</div>
<div ng-switch-when="2">
    Second page
    <a href="#" ng-click="nav.page=3">Resources</a>
</div>
<div ng-switch-when="2">
    Third page
</div>

【讨论】：

很想知道为什么会出现这种情况。不过谢谢你的回答，真的帮了我！

【解决方案2】：

您必须将控制器绑定到顶级元素。这是fiddle

HTML：

<div ng-app ng-controller="Ctrl">
     <ul class="nav nav-list bs-docs-sidenav affix sidenav">
         <li><a href="#" ng-click="page='resources'">Resources</a></li>
         <li><a href="#" ng-click="page='users'">Users</a></li>

     </ul>
     <div ng-switch on="page">
        <div ng-switch-when="resources">
           <h1>resources Div</h1>
        </div>
        <div ng-switch-when="users">
           <h1>Users</h1>
        </div>
        <div ng-switch-default>
           <h1>Default</h1>
        </div>
     </div>
</div>

【讨论】：

我的控制器绑定在 app.js 的 routeProvider 中，所以这对我的问题没有帮助。