Question

我是这个领域的新手并试图写一个网站，但我遇到了一个问题。这是我的代码的简单版本，可以在您的笔记本电脑上运行：

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="js/all.js"></script>
    <script>
        var show=false
        var notshow=true
    </script>
</head>
<body ng-controller="mainControl">
        Hide HTML: <input type="checkbox" ng-model="myVar">
        <div ng-show="myVar">
            <button>Sign Up</button>
            <button>Log In</button>
        </div>
        <div ng-show="show">
            <button>Sign Up</button>
            <button>Log In</button>
        </div>
        <div ng-show="logged">
            <button>Sign Up</button>
            <button>Log In</button>
        </div>
        <div ng-show="notshow">
            <button>Sign Up</button>
            <button>Log In</button>
        </div>
        <div ng-show="visiter">
            <button>Sign Up</button>
            <button>Log In</button>
        </div>

</body>
</html>

关于myApp和all.js，我还没有写太多关于它的内容。像这样：

(function(){
    angular.module('myApp',[])
})()

(function(){
    'use strict';
    angular.module('myApp').controller('mainControl',function($scope){
        $scope.logged=false;
        $scope.visiter=true;
    })
})()

当你运行它时，你会发现五个ng-shows根本不起作用。如果我删除ng-controller="mainControl"，则第一个ng-show效果很好，但其他人不能正常工作。我已经尝试了很长时间，但却找不到任何规则。你能修改这段代码并给我正确的版本吗？或者只是告诉我我的代码有什么问题？

Answer 1

我不熟悉javascript，所以我无法对此发表评论

(function(){... code ...})())

你正在使用的模式，但你在第二个区块被彻底忘记了()。

Answer 2

这里效果很好，

var app = angular.module('myApp', []);
app.controller('mainControl', function($scope) {
  $scope.logged = false;
  $scope.visiter = true;
})

<强> HTML

<body ng-controller="mainControl">
  Hide HTML:
  <input type="checkbox" ng-model="myVar">
  <div ng-show="myVar">
    <button>Sign Up</button>
    <button>Log In</button>
  </div>
  <div ng-show="show">
    <button>Sign Up</button>
    <button>Log In</button>
  </div>
  <div ng-show="logged">
    <button>Sign Up</button>
    <button>Log In</button>
  </div>
  <div ng-show="notshow">
    <button>Sign Up</button>
    <button>Log In</button>
  </div>
  <div ng-show="visiter">
    <button>Sign Up</button>
    <button>Log In</button>
  </div>
</body>

<强> DEMO

我的angularjs的一些奇怪的行为

2 个答案: