Html代码

Question

我有一个带控制器的非常基本的页面，我认为我应该从代码中做的很明显，但是它没有用。

这是我的HTML

<!DOCTYPE html>
<html ng-app>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>{{ 800 / 40 }} </h1>
    <h1 ng-controller="MainController">{{message}}</h1>
  </body>
</html>

使用script.js中的以下内容

var MainController = function($scope) {
     $scope.message = "Hello";
});

800/40显示20，因此建议Angular脚本和ng-app正常，但未设置消息的值。在示例中，ng-controller在h1标签中，但我也在包围h1的div中尝试过。

有什么建议吗？

由于

Answer 1

您需要创建一个角度模块

＆＃13;

var myapp = angular.module('myApp', []);

myapp.controller('MainController', function($scope){
  $scope.message= "Hello";

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<div ng-app="myApp">
    <h1 ng-controller="MainController">{{message}}</h1>
</div>

＆＃13;

Answer 2

您必须创建一个Angular模块并将该模块名称放置为ng-app属性。

工作解决方案：https://jsbin.com/nugipinale/1/edit?html,js,output

Answer 3

将角度控制器定义为

$(navSelector + ' > li', this).each(function () {
    var position = $(this).offset().left - $(this).parent().scrollLeft();
    $(this).attr('data-absolute-position', (position + 5));
    $(this).css({
       'left': $(this).data('absolute-position'),
       'position': 'absolute'
    });
});

Answer 4

   <div ng-app="myApp" ng-controller="MainController">
   <h1>{{ 800 / 40 }} </h1>
  <h1 >{{message}}</h1>
 </div>

<script>
var app = angular.module('myApp', []);
 app.controller('MainController', function($scope) {
  $scope.message = "John";
   });
 </script>

Answer 5

做这样的事，

Html代码

 <html>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="MainController">
   <h1>{{ 800 / 40 }} </h1>
  <h1 >{{message}}</h1>
 </div>
 </html>

在脚本文件

中添加

var app = angular.module('myApp', []);
 app.controller('MainController', function($scope) {
  $scope.message = "John";
   });
 </script>

如何在AngularJS中使用控制器？

5 个答案:

Html代码

在脚本文件