AngularJS的ng-show不工作

AngularJS ng-show Not Working?

本文关键字：工作 ng-show AngularJS      更新时间：2023-09-26

我正试图根据是否存在令牌来改变我的UI (ON LOAD)。我想显示和隐藏我的登录div和我的表单div基于令牌是否存在。不知什么原因，我没法让ng-show工作。为了简化问题，我有以下内容:

https://jsfiddle.net/m1q7h9fn/3/

HTML 

<div ng-app="nh-launch">
    <div ng-show="loginView">
        <h1>Login</h1>
    </div>
    <div ng-show="formView">
        <h1>Form</h1>
    </div>
</div>

JS 

angular.module('nh-launch',[]).run(function($scope) {
var token = "valid";
    if (token == "valid") {
        $scope.loginView = false;
        $scope.formView = true;
        $scope.$apply();
    }
    else {
        $scope.loginView = true;
        $scope.formView = false;
        $scope.$apply();
    }
});

将run改为controller as:

angular.module('nh-launch', []).controller('launch-controller', function($scope) {
    /* This run when page load... */
    $scope.loginView = false;
    $scope.formView = true;
    
    $scope.changeView = function() {
        /* This run when click button */
        $scope.token = ($scope.token == "valid" ? "" : "valid");
        $scope.loginView = $scope.token == "valid";
        $scope.formView = $scope.token != "valid";
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="nh-launch" ng-controller="launch-controller">
  <button type="button" ng-click="changeView();">Change</button>
  <div ng-show="loginView">
    <h1>Login</h1>
  </div>
  <div ng-show="formView">
    <h1>Form</h1>
  </div>
</div>

在像AngularJS这样的MVC框架中，模型($scope)与视图绑定。连接两者的胶水是控制器。这就是为什么应该在控制器中声明$scope变量的原因。我将重新组织你的代码如下

angular.module('nh-launch',[])
   .controller('myCtrl', ['$scope', function($scope) {
        var token = "valid";
        if (token == "valid") {
            $scope.loginView = false;
            $scope.formView = true;
            $scope.$apply();
        }
        else {
            $scope.loginView = true;
            $scope.formView = false;
            $scope.$apply();
        }
    }]);

然后用ng-controller属性创建对控制器的引用。您的HTML应该如下所示

<div ng-app="nh-launch">
  <div ng-controller="myCtrl">
    <div ng-show="loginView">
        <h1>Login</h1>
    </div>
    <div ng-show="formView">
        <h1>Form</h1>
    </div>
  </div>
</div>

必须有一个与View绑定的控制器。下面的代码将帮助您获得:

  <div ng-app="nh-launch">
    <div ng-controller="LoginCtrl">
        <div ng-show="loginView">
            <h1>Login</h1>
        </div>
        <div ng-show="formView">
            <h1>Form</h1>
        </div>
    </div>
    </div>
<script>
    angular.module('nh-launch',[]).controller('LoginCtrl',function($scope) {
        var token = "valid";
        if (token == "valid") {
            $scope.loginView = false;
            $scope.formView = true;
            $scope.$apply();
        }
        else {
            $scope.loginView = true;
            $scope.formView = false;
            $scope.$apply();
        }
    });
</script>

你不需要一个单独的控制器(尽管你应该在实际的程序中使用控制器和作用域)。

可以不需要注射$rootscope. $scope.$apply。

我已经调整了你的代码https://jsfiddle.net/m1q7h9fn/8/
相关文章：