角度范围不会按预期影响 ng-show [英] Angular scope not affecting ng-show as expected

问题描述

我有一个关于 Angular.js 范围的问题.

首先，我对 Angular 很陌生，我已经阅读了范围文档，并试图尽我所能理解它.我有一种感觉，我的问题与此类似:ng-show 未按预期绑定

然而，我的例子本质上更简单，我仍然不明白我错过了什么.

我的 html 很简单，我有一个包含所有内容的控制器:

在这里面我有部分:

<button ng-click="previous()">previous</button><button ng-click="next()">上一个</button><p>您在第 1 部分 </p><div class="section1" ng-show="{{ section.id == 1 }}">第 1 节 </div><div class="section2" ng-show="{{ section.id == 2 }}">第 2 节
<div class="section3" ng-show="{{ section.id == 3 }}">第 3 节

如您所见，我打算在应用于控制器时展示该部分.

我的应用逻辑如下:

app.controller('ApplicationFormController', ['$scope', function($scope) {$scope.sections = 部分；$scope.section = $scope.sections[0];$scope.next = function() {var index = $scope.sections.map(function(x){返回 x.id;}).indexOf($scope.section.id);$scope.section = $scope.sections[index+1];};$scope.previous = 函数(){var index = $scope.sections.map(function(x){返回 x.id;}).indexOf($scope.section.id);$scope.section = $scope.sections[index-1];};}]);

sections数组如下:

var 部分 = [{编号:1，name: '第 1 节',脚步: [{编号:1，name: '步骤 1',},{编号:2，name: '步骤 2',},{编号:3，name: '步骤 3',},]},{编号:2，name: '第 2 节',脚步: [{编号:1，name: '步骤 1',},{编号:2，name: '步骤 2',},{编号:3，name: '步骤 3',},]}];

非常简单的东西.

所以问题在于显示和隐藏.

当我触发它运行的下一个或上一个事件时，我可以看到这一点，因为 <p> 标签会使用适当的 id 更新，例如:如果我按下下一步，p 标签将更新以反映:

<p>您按预期进入第 2 部分</p>.

奇怪的是当前显示的部分没有更新.在这种情况下，第一部分将保持可见，而第二部分将保持隐藏.

是什么阻止了 DOM 更新以反映控制器的当前状态.

解决方案

那是因为 ng-show 在 表达式href="https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js#L166" rel="nofollow">内部设置的手表.但是您通过使用插值 ({{) 来提供表达式的值(boolean string).所以 watch 永远不会执行，因为 scope.$watch(attr.ngShow,...) 将评估 scope['true/false'] 而不是你想要的实际表达式

变化:

 
第 1 节 </div>

到

 
第 1 节 </div>

对其他人也是如此.

I have a question about Angular.js scope.

Firstly I am very new to Angular and I have read the scope documentation and tried to understand it the best I can. I have a feeling my question is similar to this: ng-show not binding as expected

However my example is simpler in nature and I still don't understand what I am missing.

My html is very simple, I have a controller that wraps everything:

<div ng-controller="ApplicationFormController"></div>

Inside this I have sections:

<div ng-controller="ApplicationFormController">
<button ng-click="previous()">previous</button>
<button ng-click="next()">previous</button>
<p> You are on section #1 </p>
    <div class="section1" ng-show="{{ section.id == 1 }}"> Section 1 </div>
    <div class="section2" ng-show="{{ section.id == 2 }}"> Section 2 </div>
    <div class="section3" ng-show="{{ section.id == 3 }}"> Section 3 </div>
</div>

As you can see I intend to show the section when it is applied to the controller.

My application logic is as follows:

app.controller('ApplicationFormController', ['$scope', function($scope) {
    $scope.sections = sections;
    $scope.section = $scope.sections[0];

    $scope.next = function() {
        var index = $scope.sections.map(function(x){
            return x.id;
        }).indexOf($scope.section.id);

        $scope.section = $scope.sections[index+1];
    };
    $scope.previous = function() {
        var index = $scope.sections.map(function(x){
            return x.id;
        }).indexOf($scope.section.id);

        $scope.section = $scope.sections[index-1];
    };

}]);

The sections array is as follows:

var sections = [
    {
        id: 1,
        name: 'Section 1',
        steps: [
            {
                id: 1,
                name: 'Step 1',
            },
            {
                id: 2,
                name: 'Step 2',
            },
            {
                id: 3,
                name: 'Step 3',
            },
        ]
    },
    {
        id: 2,
        name: 'Section 2',
        steps: [
            {
                id: 1,
                name: 'Step 1',
            },
            {
                id: 2,
                name: 'Step 2',
            },
            {
                id: 3,
                name: 'Step 3',
            },
        ]
    }
];

Very simple stuff.

So the issue lies in the showing and hiding.

When I trigger the next or previous event it runs, I can see this because the <p> tag updates with the appropriate id eg: if I press next the p tag will update to reflect:

<p>You are on section #2</p> as expected.

The odd thing is the section that is currently showing doesn't update. Section one in this case will stay visible while section two will stay hidden.

What is preventing the DOM from updating to reflect the current state of the controller.

解决方案

That is because ng-show takes an expression upon which a watch is set internally. But you are providing value of expression (boolean string) by using interpolation ({{). So watch never executes afterwards since scope.$watch(attr.ngShow,...) will be evaluating scope['true/false'] instead of actual expression you intended to.

Change:

   <div class="section1" ng-show="{{ section.id == 1 }}"> Section 1 </div>

to

   <div class="section1" ng-show="section.id == 1"> Section 1 </div>

and so on for others too.

这篇关于角度范围不会按预期影响 ng-show的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！