Javascript 如何在AngularJS中动态更新视图

我有两个

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>

上面的代码不起作用，因为即使在单击“Do stuff”和“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>

<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>
                        <!-- other named ui-views -->
                    </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
做一些事情，展示B
//如果当前状态为B，则显示此div

它正在更新范围。但问题可能在于

ng show

您正在使用

“{{notation}}”

设置一个字符串，该字符串始终变为truthy（即使它是“true”或“false”），只需直接使用表达式即可

改变

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

到

从文件：-

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

---

它正在更新范围。但问题可能在于

ng show

您正在使用

“{{notation}}”

设置一个字符串，该字符串始终变为truthy（即使它是“true”或“false”），只需直接使用表达式即可

改变

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

到

从文件：-

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

---

你很接近。它不工作的原因是属性“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>

//如果当前状态为，则显示此div
做一些事情，展示B
//如果当前状态为B，则显示此div

你非常接近。它不工作的原因是属性“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>

//如果当前状态为，则显示此div
做一些事情，展示B
//如果当前状态为B，则显示此div

谢谢你和Unome，我纠正了这一点，但我仍然无法在html中获得

{{states.currentState}}

的更新值，就像你展示的JS-Bin演示中一样。是否有可能因为我的html代码被用作Angular ui Router模块中的命名ui视图而无法工作？即使在单击锚定标记之后，它仍然显示相同的

{{states.currentState}}

值。@跳过不确定，查看您问题中的详细信息，您能在jsbin/plnkr中共享您的实际工作代码吗？如果您使用命名视图（使用ui路由器），您真的需要这样做吗。。你可以点击右键切换视图吗？我刚刚编辑了这个问题，为我面临的问题添加了更多的代码。你能看一下吗？@PLS:我基本上已经在

index.html

页面上有了嵌套视图，但在同一

index.html

页面上也有多个命名视图。我基本上是想给我的页面一个类似portlet的效果，所以我需要嵌套视图和命名视图。我对AngularJS很陌生，我希望我在做这样的事情时不要犯错误。@skip对我来说很好。。。您不必（不应该）使用

scope.$apply

，当它已经在angular中时。谢谢你和Unome，我纠正了这一点，但我仍然无法在html中获得

{{states.currentState}}

的更新值，就像在你展示的JS Bin演示中一样。是否有可能因为我的html代码被用作Angular ui Router模块中的命名ui视图而无法工作？即使在单击锚定标记之后，它仍然显示相同的

{{states.currentState}}

值。@跳过不确定，查看您问题中的详细信息，您能在jsbin/plnkr中共享您的实际工作代码吗？如果您使用命名视图（使用ui路由器），您真的需要这样做吗。。你可以点击右键切换视图吗？我刚刚编辑了这个问题，为我面临的问题添加了更多的代码。你能看一下吗？@PLS:我基本上已经在

index.html

页面上有了嵌套视图，但在同一

index.html

页面上也有多个命名视图。我基本上是想给我的页面一个类似portlet的效果，所以我需要嵌套视图和命名视图。我对AngularJS很陌生，我希望我在做这样的事情时不要犯错误。@skip对我来说很好。。。您不必（不应该）使用

scope.$apply

，当它已经在angular中时。