我是 Angular 新手，不明白为什么下面代码中的 ng-show 不起作用。 isLoggedIn 是 $scope 中的一个变量。
<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>
另一个模板:
<button class = "btn" ng-click = "loginCtrl.doLogin()">LOGIN</button>
登录Ctrl:
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;
}
}
]);
在更改 isLoggedIn 变量后，我尝试调用 $scope.$apply() ，这会导致异常“$apply 已在进行中”。我还尝试将 doLogin 的内部代码封装在 $timeout() 中，但也失败了。
EDIT:
配置:
angular.module('XYZ')
.config(function($routeProvider) {
console.log("Configuring routes");
$routeProvider.when('/login', {
templateUrl: "./templates/login.html",
controller: "LoginController",
controllerAs: "loginCtrl"
})
});
最佳答案
您面临的问题是您正在实例化一个新模块，但它需要第二个参数(依赖项)。
由于您没有提供任何依赖项，因此您实际上需要传递一个空数组 []作为第二个参数。看到您在 .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"
})
});
登录 Controller
<小时/>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']); )并使用该变量来实例化 Controller 、服务、工厂等。
这是一个fiddle显示功能(包括 angular-route.js 的 URL，如果您使用路由，则需要该 URL)。它不是您代码的精确复制品，因为 JSFiddle 不能很好地处理路由。
关于javascript - ng-show 不适用于 $scope，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36307724/