如何在AngularJS中动态更新视图答案

【问题标题】：How to dynamically update view in AngularJS如何在AngularJS中动态更新视图
【发布时间】：2014-08-09 04:36:58
【问题描述】：

我有 2 个div 元素如下，我想根据单击锚元素时在控制器中调用的doStuff() 函数仅显示其中一个。

<div ng-controller='myController'>
    <div ng-show="{{states['currentState'] == 'A'}}">
        //displaying this div if the currentState is A
        <a ng-click="doStuff('B')">Do stuff and show B</a>
    </div>
    <div ng-show="{{states['currentState'] == 'B'}}">
        //displaying this div if the currentState is B
    </div>
</div>

以下是控制器代码：

myApp.controller('myController', ['$scope', function($scope) {

  var states = ['A', 'B'];
  $scope.states = states;
  $scope.states['currentState'] = $scope.states['currentState'] || 'A';

  $scope.doStuff = function(stateToShow) {
    //doing stuff
    $scope.states['currentState'] = stateToShow;
  };

}]);

上面的代码不起作用，因为即使在单击 Do stuff and show B 锚元素之后，状态仍保持为“A”。

有人可以帮我理解为什么它不起作用吗？

编辑

app.js

 //...

    .state('home', {
        url: '/',
        views: {

            '': { templateUrl: 'partials/index.html' },

            'myView@home': {
                templateUrl: 'partials/myView.html',
                controller: 'VehicleController'
            }
            //other named ui views
        }

    })

 //...

index.html

<div class="main">
    <div class="container">
        <div class="row margin-bottom-40">
            <div class="col-md-12 col-sm-12">
                <div class="content-page">
                    <div class="row">
                        <div ui-view="myView"></div>
                        <!-- other named ui-views -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

myView.html

<div ng-controller='myController'>
    <div ng-show="states['currentState'] == 'A'">
        //displaying this div if the currentState is A
        <a ng-click="doStuff('B')">Do stuff and show B</a>
    </div>
    <div ng-show="states['currentState'] == 'B'">
        //displaying this div if the currentState is B
    </div>
</div>

【问题讨论】：

标签： javascript angularjs angularjs-ng-click ng-show

【解决方案1】：

它正在更新范围。但问题可能出在ng-show 上，您正在使用"{{notation}}" 设置一个字符串，它总是变得真实（即使它是“true”或“false”），只需直接使用表达式即可。

改变

 <div ng-show="{{states['currentState'] == 'A'}}">

到

 <div ng-show="states.currentState === 'A'">

Demo

来自文档：-

ngShow 表达式 - 如果表达式为真，则元素分别显示或隐藏。

【讨论】：

谢谢 PLS 和 Unome，我更正了这一点，但我仍然无法在 html 中获得 {{states.currentState}} 的更新值，就像它在您展示的 JS Bin 演示中发生的那样。是否有可能因为我的 html 代码被用作 Angular UI Router 模块中的命名 ui 视图而无法正常工作？即使在单击锚标记后，它仍然显示相同的 {{states.currentState}} 值。
@skip 不确定，查看您在问题中的详细信息，您可以在 jsbin/plnkr 中分享您的实际工作代码吗？如果您使用的是命名视图（使用 ui 路由器），您真的需要这样做吗？您可以在单击右键时切换视图？
我刚刚编辑了这个问题，为我面临的给定问题添加了更多代码。你能看一下吗？
@PLS：我基本上已经在index.html 页面上有一个嵌套视图，但我在同一个index.html 页面上也有多个命名视图。我基本上是想给我的页面一个类似 portlet 的效果，所以我需要嵌套视图和命名视图。我对 AngularJS 很陌生，我希望我不会在这里犯这样的错误。
@skip 对我来说似乎很好......你不必（不应该）使用 scope.$apply 当已经在 Angular 中时。 plnkr.co/edit/aNjz3mO29nkfllbJpqN6?p=preview

【解决方案2】：

你很亲密。它不工作的原因是属性“ng-show”不需要“{{”“}}”符号来工作。

我刚刚构建了您的代码，但将其删除，它正在按照您描述的那样工作。

<div ng-show="states['currentState'] == 'A'">
    //displaying this div if the currentState is A
    <a ng-click="doStuff('B')">Do stuff and show B</a>
</div>
<div ng-show="states['currentState'] == 'B'">
    //displaying this div if the currentState is B
</div>

【讨论】：