Question

我正在尝试学习角度1.5，我很难让控制器在网页上显示文字。它显示event.name而不是控制器中的内容。

这是EventDetails.html

var eventsApp = angular.module('eventsApp',[]);

我的app.js

'use strict';

eventsApp.controller('EventController',
function EventController($scope) {
    $scope.event = {
        name: 'Angular Boot Camp',
        time: '10:30 am',
        date: '1/1/2013'
        }

    }
);

EventController

{{1}}

Answer 1

你的控制器应该是，

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>

Answer 2

您在html上遗漏了ng-app="myApp"声明，这就是您的角度应用未运行的原因。

Answer 3

尝试在EventDetails.html中反转脚本加载顺序。

应该最后加载app.js.

正确的顺序应该是：

   <script scr="/js/controllers/EventController.js"/>
   <script scr="/js/app.js"/>

你也应该采用其他评论，添加ng-app注释（@geofrey评论）并重构你的控制器（@Sajeetharan评论）

Answer 4

使用＆＃34; src＆＃34;取而代之的是＆＃34; scr＆＃34; （不是＆＃34;脚本scr = ...＆＃34;）在脚本标签中。

<!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>

角度1.5控制器不显示文本

4 个答案: