angular 1.5控制器不顯示文本
[英]angular 1.5 controller not displaying text
問題描述
我正在嘗試學習angular 1.5，但我很難讓控制器在網頁上顯示文本。 它顯示event.name而不是控制器中的內容。
這是EventDetails.html
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="container">
<div ng-controller="EventController">
{{event.name}}
</div>
</div>
<script scr="/lib/jquery.min.js"/>
<script scr="/lib/underscore-1.4.4.min.js"/>
<script scr="/lib/boostrap.min.js"/>
<script scr="/lib/angular/angular.min.js"/>
<script scr="/js/app.js"/>
<script scr="/js/controllers/EventController.js"/>
</body>
</html>
我的app.js
var eventsApp = angular.module('eventsApp',[]);
事件控制器
'use strict';
eventsApp.controller('EventController',
function EventController($scope) {
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
}
}
);
4 個解決方案
解決方案1
2 2017-06-11 10:54:49
您的控制器應該是
eventsApp.controller('EventController',
function($scope) {
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
}
}
);
演示
var eventsApp = angular.module('myApp',[]) eventsApp.controller('EventController', function($scope){ $scope.event = { name: 'Angular Boot Camp', time: '10:30 am', date: '1/1/2013' } ; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="EventController"> <div class="container"> <h1> {{event.name}} </h1> </div> </div> </body>
解決方案2
0 2017-06-12 18:53:52
您在html上缺少ng-app="myApp"聲明，這就是為什么您的角度應用程序未運行的原因。
解決方案3
0 2017-08-15 13:53:44
嘗試在EventDetails.html中反轉腳本的加載順序。
app.js應該最后加載。
正確的順序應為：
<script scr="/js/controllers/EventController.js"/>
<script scr="/js/app.js"/>
並且您還應該采用其他注釋，添加ng-app注釋（@geofrey注釋）並重構控制器（@Sajeetharan注釋）
解決方案4
0 2017-08-15 14:37:55
在腳本標記中使用“ src”屬性代替“ scr”（而不是“ script scr = ...”）。
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="container">
<div ng-controller="EventController">
{{event.name}}
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script>
var eventsApp = angular.module('eventsApp',[]);
'use strict';
eventsApp.controller('EventController', function EventController($scope) {
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
}
});
</script>
</body>
</html>
Angular 1.5：訪問控制器內的 bindToController 屬性
[英]Angular 1.5: Access bindToController properties inside controller
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.