角度范围不影响ng-show预期

Question

我对Angular.js范围有疑问。

首先，我是Angular的新手，我已经阅读了范围文档，并尽我所能来理解它。我觉得我的问题与此类似： ng-show不符合预期的绑定

但是，我的示例本质上更简单，我仍然不明白我所缺少的内容。

我的html非常简单，我有一个包装所有内容的控制器：

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

在其中，我有几个部分：

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

如您所见，我打算在将其应用于控制器时显示该部分。

我的应用程序逻辑如下：

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];
    };

}]);

section数组如下：

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',
            },
        ]
    }
];

很简单的东西。

因此，问题在于显示和隐藏。

当我触发下一个或上一个事件运行时，我会看到此<p>消息，因为标记会使用适当的ID进行更新，例如：如果按下下一步，p标记将进行更新以反映：

<p>You are on section #2</p> 如预期的那样。

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

是什么导致DOM无法更新以反映控制器的当前状态。

Answer 1

这是因为ng-show需要一个表达式时，其手表在内部设置。但是您boolean string通过使用插值（{{）提供表达式（）的值。因此watch永远不会执行，因为scope.$watch(attr.ngShow,...)它将评估scope['true/false']而不是您想要的实际表达。

更改：

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

至

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

对其他人也是如此。