Javascript 为什么对象上的“.show”属性会破坏基于该对象的数据绑定？_Javascript_Angularjs_Data Binding_Show

Javascript 为什么对象上的“.show”属性会破坏基于该对象的数据绑定？

javascript angularjs data-binding

Javascript 为什么对象上的“.show”属性会破坏基于该对象的数据绑定？,javascript,angularjs,data-binding,show,Javascript,Angularjs,Data Binding,Show,这里有一个非常新手的问题：我正在写一个片段，如果单击按钮，它可以显示和隐藏菜单。绑定到menuState变量的数据在以下代码中不起作用，我在菜单状态上标记了.show属性 <html ng-app> <body> <div ng-controller="DeathrayController"> <p>menuState: {{menuState.show}}</p> <button ng-click="toggl

这里有一个非常新手的问题：

我正在写一个片段，如果单击按钮，它可以显示和隐藏菜单。绑定到

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>

为什么

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

但是为什么

menuState

定义时没有

show

属性呢？

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

$scope.menuState.show = false;

由于以前未定义

$scope.menuState

，javascript试图访问

$scope.menuState

的属性

show

，并引发错误，您需要将代码更改为：

$scope.menuState={show:false}

控制台有错误吗？可能是这样的：“无法设置未定义的属性‘show’”？它确实这么说，但我定义了它，不是吗？一分钟，正在处理答案；）

$scope.menuState.show = false;