AngularJs 控制器未链接到视图

AngularJs Controller not linking to view

本文关键字：视图 链接 控制器 AngularJs      更新时间：2023-09-26

我不明白为什么我在控制器中键入的文本没有链接到视图。

我创建了两个JavaScript文件。 app.js和MainController.js

我按照Codecademy的教程复制了一个类似的场景，但我可能错过了一些非常基本的东西，由于某种原因我无法弄清楚。

以下是我的文件：

索引.html 

<!DOCTYPE html>
<html lang="en">
<body ng-app="myApp" ng-controller="MainController">
  <h1>{{title}}</h1>
  <scipt src="js/app.js"></scipt>
  <script src="js/controller/MainController.js"></script>
</body>
</html>

应用.js

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

主控制器.js

app.controller('MainController', ['$scope', function ($scope) {
    $scope.title = 'Hola!';
}]);

我认为这可能与将我的主控制器放在应用程序.js文件的单独文件中有关。

我认为您没有在主页（index.html）中加载Angular，因此只需添加此行

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
您需要

在 MainController 中引用它之前声明应用程序变量.js

// MainController.js
var app = angular.module('myApp');

在主控制器中

angular.module('myApp').controller(......

你需要添加Angular.js到你的头上。在你应用之前.js我认为现在没有加载角度。

索引.html 

 <head>
   <title>{{title}}</title>
   <script data-require="angular.js@1.5.0-rc.0"    data-semver="1.5.0-rc.0"    src="https://code.angularjs.org/1.5.0-   rc.0/angular.js"></script>
   <link rel="stylesheet" href="style.css" />
   <script src="app.js"></script>
 </head>
 <body >
   <h1>{{title}}</h1>
   {{1+1}}
 </body>
</html>

应用.js

(function() {
 angular.module('myApp', [])
   .controller('mainController', ['$scope', function($scope) {
     $scope.title = 'Hello world!';
   }]);
}())

注意：不要声明变量app因为这是在全局范围内。 可以被其他东西覆盖 总是尝试使用 IFFE并将控制器添加到模块中，如果要将服务放在另一个文件中，请创建其他模块。

相关文章：