$scope 在我的导航栏控制器中不起作用?
$scope not working in my nav bar controller?
我的 Angular 应用程序是使用此 yeoman generator 的样板开发的。
路由和所有工作正常,但我无法仅在 navbar-controller.js 和 footer-controller.js 上工作 $scope。如果您需要更多信息来提供线索,请告诉我。
Index.html
<!DOCTYPE html>
<html lang='en' data-ng-app='app'>
<head>
<title>App</title>
<meta name='viewport' content='width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes'>
<!-- inject:head:js -->
<!-- endinject -->
<!-- inject:html -->
<!-- endinject -->
<!-- bower:css -->
<!-- endbower -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body class="wrapper">
<div ng-controller="NavbarCtrl" ng-include="'navbar/navbar.tpl.html'"></div>
<!-- boxed-layout -->
<div class='container'>
<!--=== Main Content ===-->
<div data-ui-view></div>
<!--=== End Main Content ===-->
</div>
<!-- <div id="footer"
ng-controller="FooterCtrl" ng-include="'footer/footer.tpl.html'">
</div> -->
<!-- bower:js -->
<!-- endbower -->
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
导航栏-controller.js
(function () {
'use strict';
angular
.module('navbar')
.controller('NavbarCtrl', NavbarCtrl);
function NavbarCtrl() {
var vm = this;
vm.ctrlName = 'NavbarCtrl';
this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());
导航栏-module.js
(function () {
'use strict';
angular
.module('navbar', [
'ui.router'
]);
}());
导航栏-routes.js
(function () {
'use strict';
angular
.module('navbar')
.config(config);
function config($stateProvider) {
$stateProvider
.state('navbar', {
url: '/navbar',
templateUrl: 'navbar/navbar.tpl.html',
controller: 'NavbarCtrl',
controllerAs: 'navbar'
});
}
}());
导航栏-trl.html
....
.....
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li ng-hide="navbar.isLoggedIn"><a ui-sref="login">Login {{navbar.ctrlName}}</a></li>
<li ng-hide="navbar.isLoggedIn" ><a ui-sref="register">Signup</a></li>
<li ng-show="navbar.isLoggedIn"><a>Logged as {{navbar.username}}</a></li>
<li ng-show="navbar.isLoggedIn"><a ui-sref="login">Logout</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
....
.....
更新:
我找到了答案。谢谢大家。
我想知道在其他控制器中我没有注入 $scope 因为我使用控制器作为语法而且它工作得很好。谁能解释一下这背后的原因,为什么我只需要在导航栏中注入 $scope?
在你的导航栏-controller.js
中注入$scope
(function () {
'use strict';
angular
.module('navbar')
.controller('NavbarCtrl','$scope', NavbarCtrl, $scope); // adding $scope in the
//controller dependency list
function NavbarCtrl() {
var vm = this;
vm.ctrlName = 'NavbarCtrl';
this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());
你必须像这样初始化和注入 $scope:
(function(){
'use strict';
angular.module('navbar')
.controller('NavbarCtrl', ['$scope', 'otherDependecy', function($scope, otherDependecy){
yourAwesomeCodeGoesHere();
$scope.someObject = 'Hello world';
}]);
})();
OR: (只提取controller的main函数)
(function(){
'use strict';
angular.module('navbar')
.controller('NavbarCtrl', ['$scope', 'otherDependecy', NavbarCtrl]);
function NavbarCtrl($scope, otherDependecy){
yourAwesomeCodeGoesHere();
$scope.someObject = 'Hello world';
}
})();
@更新:
您可能是指指令控制器?在这种情况下 $scopes 被初始化并自动注入,你只需要记住添加 $scope 作为控制器函数的参数。就这些了。
您必须在 navbar-controller.js 中注入 $scope(还记得 Dependency injection 吗?),就像这样:-
(function () {
'use strict';
angular
.module('navbar')
.controller('NavbarCtrl','$scope', NavbarCtrl);
function NavbarCtrl($scope) {
var vm = this;
vm.ctrlName = 'NavbarCtrl';
this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());
您必须像这样在您的控制器中注入 $scope
作为服务:
导航栏-controller.js
(function () {
'use strict';
angular
.module('navbar')
.controller('NavbarCtrl', NavbarCtrl);
function NavbarCtrl($scope) { // $scope as a service of this controller
var vm = this;
vm.ctrlName = 'NavbarCtrl';
this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());
更好的做法是在数组中传递服务,这样在缩小等情况下会更加安全,因为名称不会被覆盖。
navbar-controller-array-services.js
(function () {
'use strict';
angular
.module('navbar')
.controller('NavbarCtrl', ['$scope', '$http', '$timeout', NavbarCtrl]);
function NavbarCtrl($scope, $http, $timeout) { // $scope as a service of this controller
var vm = this;
vm.ctrlName = 'NavbarCtrl';
this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());
确保您注入服务的顺序与它们在控制器中的顺序相同。
希望对您有所帮助。
我的 Angular 应用程序是使用此 yeoman generator 的样板开发的。
路由和所有工作正常,但我无法仅在 navbar-controller.js 和 footer-controller.js 上工作 $scope。如果您需要更多信息来提供线索,请告诉我。
Index.html
<!DOCTYPE html>
<html lang='en' data-ng-app='app'>
<head>
<title>App</title>
<meta name='viewport' content='width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes'>
<!-- inject:head:js -->
<!-- endinject -->
<!-- inject:html -->
<!-- endinject -->
<!-- bower:css -->
<!-- endbower -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body class="wrapper">
<div ng-controller="NavbarCtrl" ng-include="'navbar/navbar.tpl.html'"></div>
<!-- boxed-layout -->
<div class='container'>
<!--=== Main Content ===-->
<div data-ui-view></div>
<!--=== End Main Content ===-->
</div>
<!-- <div id="footer"
ng-controller="FooterCtrl" ng-include="'footer/footer.tpl.html'">
</div> -->
<!-- bower:js -->
<!-- endbower -->
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
导航栏-controller.js
(function () {
'use strict';
angular
.module('navbar')
.controller('NavbarCtrl', NavbarCtrl);
function NavbarCtrl() {
var vm = this;
vm.ctrlName = 'NavbarCtrl';
this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());
导航栏-module.js
(function () {
'use strict';
angular
.module('navbar', [
'ui.router'
]);
}());
导航栏-routes.js
(function () {
'use strict';
angular
.module('navbar')
.config(config);
function config($stateProvider) {
$stateProvider
.state('navbar', {
url: '/navbar',
templateUrl: 'navbar/navbar.tpl.html',
controller: 'NavbarCtrl',
controllerAs: 'navbar'
});
}
}());
导航栏-trl.html
....
.....
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li ng-hide="navbar.isLoggedIn"><a ui-sref="login">Login {{navbar.ctrlName}}</a></li>
<li ng-hide="navbar.isLoggedIn" ><a ui-sref="register">Signup</a></li>
<li ng-show="navbar.isLoggedIn"><a>Logged as {{navbar.username}}</a></li>
<li ng-show="navbar.isLoggedIn"><a ui-sref="login">Logout</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
....
.....
更新: 我找到了答案。谢谢大家。 我想知道在其他控制器中我没有注入 $scope 因为我使用控制器作为语法而且它工作得很好。谁能解释一下这背后的原因,为什么我只需要在导航栏中注入 $scope?
在你的导航栏-controller.js
中注入$scope
(function () {
'use strict';
angular
.module('navbar')
.controller('NavbarCtrl','$scope', NavbarCtrl, $scope); // adding $scope in the
//controller dependency list
function NavbarCtrl() {
var vm = this;
vm.ctrlName = 'NavbarCtrl';
this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());
你必须像这样初始化和注入 $scope:
(function(){
'use strict';
angular.module('navbar')
.controller('NavbarCtrl', ['$scope', 'otherDependecy', function($scope, otherDependecy){
yourAwesomeCodeGoesHere();
$scope.someObject = 'Hello world';
}]);
})();
OR: (只提取controller的main函数)
(function(){
'use strict';
angular.module('navbar')
.controller('NavbarCtrl', ['$scope', 'otherDependecy', NavbarCtrl]);
function NavbarCtrl($scope, otherDependecy){
yourAwesomeCodeGoesHere();
$scope.someObject = 'Hello world';
}
})();
@更新:
您可能是指指令控制器?在这种情况下 $scopes 被初始化并自动注入,你只需要记住添加 $scope 作为控制器函数的参数。就这些了。
您必须在 navbar-controller.js 中注入 $scope(还记得 Dependency injection 吗?),就像这样:-
(function () {
'use strict';
angular
.module('navbar')
.controller('NavbarCtrl','$scope', NavbarCtrl);
function NavbarCtrl($scope) {
var vm = this;
vm.ctrlName = 'NavbarCtrl';
this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());
您必须像这样在您的控制器中注入 $scope
作为服务:
导航栏-controller.js
(function () {
'use strict';
angular
.module('navbar')
.controller('NavbarCtrl', NavbarCtrl);
function NavbarCtrl($scope) { // $scope as a service of this controller
var vm = this;
vm.ctrlName = 'NavbarCtrl';
this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());
更好的做法是在数组中传递服务,这样在缩小等情况下会更加安全,因为名称不会被覆盖。
navbar-controller-array-services.js
(function () {
'use strict';
angular
.module('navbar')
.controller('NavbarCtrl', ['$scope', '$http', '$timeout', NavbarCtrl]);
function NavbarCtrl($scope, $http, $timeout) { // $scope as a service of this controller
var vm = this;
vm.ctrlName = 'NavbarCtrl';
this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());
确保您注入服务的顺序与它们在控制器中的顺序相同。
希望对您有所帮助。