AngularJS变量不持久化查看
AngularJS variable does not persist to view
这里有一个奇怪的错误,我可以成功切换到其他视图,但我的问题是即使是一个简单的变量也不能 "reach" 视图。有人看到我的(可能是愚蠢的)错误吗?
Index.html
<html ng-app="myApp">
<head>
<title>AngularJS oefening</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<header>
<a href="#/home">Home</a>
<a href="#/about">Over ons</a>
<a href="#/contact">Contact</a>
</header>
<div ng-view>
</div>
<footer>
Copyright...
</footer>
</div>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-route.min.js"></script>
<script src="js/controller.js"></script>
</body>
Controller.js
angular.module('myApp', ['ngRoute'])
.config(moduleConfig);
moduleConfig.$inject = ['$routeProvider'];
function moduleConfig($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/home.html',
controller: 'homeController',
contollerAs : 'homeCtrl'
})
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeController',
contollerAs : 'homeCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController',
contollerAs : 'aboutCtrl'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'contactController',
contollerAs : 'contactCtrl'
})
.otherwise({
redirectTo: '/'
});
};
angular.module('myApp')
.controller('homeController', homeController)
.controller('aboutController', aboutController)
.controller('contactController', contactController);
function homeController() {
this.msg = "Hello home";
};
function aboutController() {
this.msg = "Hello about";
};
function contactController() {
this.msg = "Hello contact";
};
Home.html
<div>
<h1>{{homeCtrl.msg}}</h1>
</div>
我使用硬编码文本进行了测试,每当我使用菜单进行导航时,它都会提供正确的视图。我还尝试记录不同的对象(homeController、homeCtrl 等)。只有变量 this 不是未定义的,但是这个变量只包含 $scope.
提前致谢。
搜索了将近 2 小时后..我发现了我愚蠢的..愚蠢的错误。
contollerAs -> controllerAs
这里有一个奇怪的错误,我可以成功切换到其他视图,但我的问题是即使是一个简单的变量也不能 "reach" 视图。有人看到我的(可能是愚蠢的)错误吗?
Index.html
<html ng-app="myApp">
<head>
<title>AngularJS oefening</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<header>
<a href="#/home">Home</a>
<a href="#/about">Over ons</a>
<a href="#/contact">Contact</a>
</header>
<div ng-view>
</div>
<footer>
Copyright...
</footer>
</div>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-route.min.js"></script>
<script src="js/controller.js"></script>
</body>
Controller.js
angular.module('myApp', ['ngRoute'])
.config(moduleConfig);
moduleConfig.$inject = ['$routeProvider'];
function moduleConfig($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/home.html',
controller: 'homeController',
contollerAs : 'homeCtrl'
})
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeController',
contollerAs : 'homeCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController',
contollerAs : 'aboutCtrl'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'contactController',
contollerAs : 'contactCtrl'
})
.otherwise({
redirectTo: '/'
});
};
angular.module('myApp')
.controller('homeController', homeController)
.controller('aboutController', aboutController)
.controller('contactController', contactController);
function homeController() {
this.msg = "Hello home";
};
function aboutController() {
this.msg = "Hello about";
};
function contactController() {
this.msg = "Hello contact";
};
Home.html
<div>
<h1>{{homeCtrl.msg}}</h1>
</div>
我使用硬编码文本进行了测试,每当我使用菜单进行导航时,它都会提供正确的视图。我还尝试记录不同的对象(homeController、homeCtrl 等)。只有变量 this 不是未定义的,但是这个变量只包含 $scope.
提前致谢。
搜索了将近 2 小时后..我发现了我愚蠢的..愚蠢的错误。
contollerAs -> controllerAs