为什么对象上的“.show”属性会搞砸基于该对象的数据绑定

Why does the `.show` property on an object screw up the databinding based on that object?

本文关键字：对象 于该 数据绑定 show 为什么 属性      更新时间：2023-09-26

非常新手的问题在这里：

我正在编写一个片段，如果单击按钮，它可以显示和隐藏菜单。 在下面的代码中，与 menuState 变量的数据绑定不起作用，其中我有一个标记为菜单状态的 .show 属性。

<html ng-app>
<body>
<div ng-controller="DeathrayController">
    <p>menuState: {{menuState.show}}</p>
    <button ng-click="toggleMenu()">Toggle Menu</button>
    <ul ng-show='menuState.show'>
        <li >Stun</li>
        <li >Disintegrate</li>
    </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>

function DeathrayController($scope){
    $scope.menuState.show = false;
    $scope.toggleMenu = function(){
        $scope.menuState.show = !$scope.menuState.show;
    };
}
</script>

但是，这个代码段，没有 menuState 变量上的 .show 属性就可以正常工作：

<html ng-app>
<body>
    <div ng-controller="DeathrayController">
        <p>menuState: {{menuState}}</p>
        <button ng-click="toggleMenu()">Toggle Menu</button>
        <ul ng-show='menuState'>
            <li >Stun</li>
            <li >Disintegrate</li>
        </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script>
    function DeathrayController($scope){
        $scope.menuState = false;
        $scope.toggleMenu = function(){
            $scope.menuState = !$scope.menuState;
        };
    }
    </script>
</body>
</html>

为什么 .show 属性会搞砸数据绑定？

更新：这是我从控制台收到的错误消息：

TypeError: Cannot set property 'show' of undefined
    at new DeathrayController (file:///var/folders/61/3h5pq5d14sx9ry5mdgxt00480000gn/T/tmpyxin9v.htm:18:25)
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:27:325)
    at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:27:455)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:50:239
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:42:154
    at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:6:312)
    at k (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:42:16)
    at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:38:198)
    at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:38:215)
    at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js:38:215)

但是，为什么在没有show属性的情况下定义menuState呢？

问题是你不能声明这样的对象：

$scope.menuState.show = false;

由于之前没有定义$scope.menuState，JavaScript 尝试访问 $scope.menuState 的属性show并抛出错误，您需要将代码更改为：

$scope.menuState = {show : false} ;

相关文章：