Question

我是棱角分明的新手，无法理解为什么以下代码中的ng-show无效。 isLoggedIn是$ scope中的变量。

Date oldDtEffet = (Date) event.getOldState()[i];
Date newDtEffet = (Date) event.getState()[i];
if(oldDtEffet != null && newDtEffet != null &&
        DateUtils.isDateEqualsWithoutTime(oldDtEffet,newDtEffet)){
    event.getOldState()[i] = event.getState()[i];
}

另一个模板：

<html ng-app"XYZ"
<body>
    <nav id="myNav" ng-show = "isLoggedIn" ng-controller="NavBarController as navCtrl">
        <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Logo</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse">
                <i class="material-icons">menu</i>
            </a>
            <ul class="side-nav" id="mobile-demo">
                <li>
                    <a href="sass.html">Sass</a>
                </li>
                <li>
                    <a href="badges.html">Components</a>
                </li>
                <li>
                    <a href="collapsible.html">Javascript</a>
                </li>
                <li>
                    <a href="mobile.html">Mobile</a>
                </li>
            </ul>
        </div>
    </nav>
    <div ng-view>

    </div>...</body></html>

loginCtrl：

 <button class = "btn" ng-click = "loginCtrl.doLogin()">LOGIN</button>

我在更改了isLoggedIn变量之后尝试调用$ scope。$ apply（），导致异常'$ apply in progress'。我还尝试将doLogin的内部代码封装在$ timeout（）中，但也失败了。

编辑：

配置：

angular.module('XYZ')
.controller('LoginController', ['NetworkService',
    '$routeParams',
    '$location',
    '$scope',
    '$timeout',
    function(NetworkService, $routeParams, $location,$scope,$timeout) {
        var self = this;
        $scope.isLoggedIn = false;
        // $scope.$apply();
        self.doLogin = function(){
            $scope.isLoggedIn = true;
        }
    }
]);

Answer 1

您面临的问题是您正在实例化一个新模块，但它需要第二个参数（依赖项）。

由于您没有提供任何依赖项，实际上您需要传递一个空数组[]作为第二个参数。并且看到你在.config()中使用$ routeProvider，你应该包括AngularJS提供的依赖关系或其他一些“路由”依赖关系（例如ui-router）

所以你的代码必须如下所示：

<强>配置

angular.module('XYZ', ['ngRoute'])
.config(function($routeProvider) {
    console.log("Configuring routes");
    $routeProvider.when('/login', {
            templateUrl: "./templates/login.html",
            controller: "LoginController",
            controllerAs: "loginCtrl"
        })
    });

<强>的LoginController

angular.module('XYZ', ['ngRoute'])
.controller('LoginController', ['NetworkService',
    '$routeParams',
    '$location',
    '$scope',
    '$timeout',
    function(NetworkService, $routeParams, $location,$scope,$timeout) {
        var self = this;
        $scope.isLoggedIn = false;
        // $scope.$apply();
        self.doLogin = function(){
            $scope.isLoggedIn = true;
        }
    }
]);

每次重新实例化模块也是一种不好的做法，因此将其分配给变量（var myApp = angular.module('XYZ', ['ngRoute']);）并使用该变量来实例化控制器，服务，工厂等。

这是显示功能的fiddle（包括angular-route.js的URL，如果您使用路由，则需要这些URL）。它不是代码的精确副本，因为JSFiddle不能很好地处理路由。

Answer 2

你的控制器叫做LoginController因此ng-controller = LoginController，控制器也需要在父标签中调用任何其他指令....见下面的修复。

<body ng-controller="LoginController">
<nav id="myNav" ng-show = "isLoggedIn" >
    <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse">
            <i class="material-icons">menu</i>
        </a>
        <ul class="side-nav" id="mobile-demo">
            <li>
                <a href="sass.html">Sass</a>
            </li>
            <li>
                <a href="badges.html">Components</a>
            </li>
            <li>
                <a href="collapsible.html">Javascript</a>
            </li>
            <li>
                <a href="mobile.html">Mobile</a>
            </li>
        </ul>
    </div>
</nav>
<div ng-view>

</div>...</body></html>

Answer 3

angular.module('XYZ')
.controller('LoginController', ['$routeParams',
    '$location',
    '$scope',
    '$timeout',
    function($scope) {

    $scope.isLoggedIn = false;

    $scope.doLogin = function(){
        $scope.isLoggedIn = true;
    };
}
]);

您只需将$ scope of object设置为true或false即可创建服务，您可以使用控制器本身来处理它。在HTML中，为ng-click

执行以下更改

 <button class = "btn" ng-click = "doLogin()">LOGIN</button>

这应该有用。

Answer 4

我解决了。问题是我想要隐藏（或显示）的元素超出了LoginController的范围。由于$ scope.isLoggedIn正在控制器的范围内进行更改，因此$ scope不知道需要更改的HTML不在同一范围内。放入＆＃39; isLoggedIn＆＃39;在$ rootScope中工作。感谢@Jorrex帮助并向我提供解决方案以及每个试图帮助我的人。

//solution
app.controller('LoginController', ['NetworkService', '$routeParams',
'$location',
'$scope',
'$timeout',
'$rootScope',
function(NetworkService, $routeParams, $location,$scope,$timeout,$rootScope) {

        $scope.doLogin = function(){
            $rootScope.isLoggedIn = true;
        }
    }
]);

ng-show不适用于$ scope

4 个答案: