0

我有一个名为的视图myView，其中我有两个 div 元素，我想ng-show根据$scope.states['currentState']is'A'或的值有条件地使用它们'B'。当单击调用控制器上的函数$scope.states['currentState']的锚标记时，会更改的值。doStuffmyController

我遇到的问题是，当单击锚标记并单击doStuff函数时，它会在控制台上显示 的值$scope.states['currentState']已被修改，但并未myView相应地更新命名视图。

以下是app.js,myView.html和index.html文件的代码。该index.html文件被用作我使用 Express 和 Node.js 渲染<div ui-view></div>的文件中的一个。index.ejs

应用程序.js

var app = angular.module("app", ['ui.router']).

    config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

        $locationProvider.html5Mode(true);

        $urlRouterProvider.otherwise('/');

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

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

                    'myView@home': {
                        templateUrl: 'partials/myView.html',
                        controller: 'myController'
                    },

                    'myOtherView@home': {
                        templateUrl: 'partials/myOtherView.html',
                        controller: 'myController'
                    }
                }

            });

    }])

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

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

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

} ]);

索引.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>
                        <div ui-view="myOtherView"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的视图.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>

有人可以帮助我理解为什么没有显示divwith ，即使在调用函数states['currentState'] == 'B'时我看到值console.log($scope.states['currentState'])从 'A' 更改为 'B' ？doStuffmyController

编辑： 这是我面临的问题的演示。

4

1 回答 1

1

好的所以我在评论中弄错了。真正的问题是你在你的 ng-show 中使用了 {{}} ，因为它们期望采用角度表达式，所以我会将当前状态作为你的范围的属性，因为此时你正试图使其成为范围内数组的属性。希望有帮助！以下是您的视图的修改代码：

<div ng-controller='MainCtrl'>
  <div ng-show="currentState === 'A'">
    <a ng-click="doStuff('B')">Do stuff and show B</a>
  </div>
  <div ng-show="currentState === 'B'">
    <a ng-click="doStuff('A')">Do stuff and show A</a>
  </div>
</div>

编辑：工作 plunker http://plnkr.co/edit/1llQMQEdxIwu65MNoorx?p=preview

于 2014-08-09T16:11:09.667 回答