Node.js 如何使用ui路由器动态更改angularjs中的视图

我有一个名为

myView

的命名视图，其中有两个div元素，我想根据

$scope.states['currentState']

的值是

'a'

还是

'B'

使用

ng show

有条件地显示它们。单击锚定标记调用

myController

控制器上的

doStuff

函数时，

$scope.states['currentState']

的值会更改

我遇到的问题是，单击锚定标记并单击

doStuff

函数时，控制台上会显示

$scope.states['currentState']

的值已被修改，但它不会相应地更新

myView

命名视图

下面是

app.js

、

myView.html

和

index.html

文件的代码。

index.html

文件被用作

index.ejs

文件中的

，我正在使用带有Node.js的Express呈现该文件

app.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']);
    };

} ]);

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

<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>

myView.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>

<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>

//如果当前状态为，则显示此div
是我面临的问题的演示。
好吧，所以我的评论错了。
真正的问题是，您在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>


在更新结束时尝试$scope.apply（）functions@c0d3junk13：这是演示如何处理给定的问题。@c0d3junk13:
$scope.$apply（）doStuff
的末尾，code>抛出
错误：[$rootScope:inprog]$apply已经在进行中了
错误。我错误地将它们
{{
和
}
放在那里，一定忘了保存更新的plunkr。删除
{{
和
}
后，它仍然不起作用。是否将当前状态更改为作用域对象上它自己的属性，您无法分配$scope。声明属性它是数组。非常感谢plunker:）
states['currentState']
也起了作用。没问题，这样做很酷，但为了将来的参考，为数组分配键有点像制作半哈希映射，半数组讨厌：L