Question

任何人都可以指出错误，为什么我无法从控制器读取数据？

链接到plunker

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js.1.3@*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />

    <script src="script.js"></script>

  </head>

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

</html>

// Code goes here

// Code goes here

var MainController = function($scope) {

  $scope.message = "Hello";
};

Answer 1

ng-app名称在哪里？提供模块名称。

angular.module('myApp',[])
    .controller('SomeCtrl',function($scope){ .. your code ...})

在.html档案

中提供

<html ng-app="myApp">

修正了Plunkr

您指的是AngularJS的旧版本，用于学习并在plunkr中使用1.5。请查看以下链接

对于您的应用，请参阅

Answer 2

虽然您的代码可能正确，但它早于版本1.3.0

1.3.0之前的版本：

在1.3.0之前，angular能够自动发现控制器这是全球定义的。

检查下面我创建了无模块

<div ng-app>
   <div ng-controller="MainController">
       {{message}}
   </div>
</div>

代码可以是：

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

<!DOCTYPE html>
<html ng-app>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.32/angular.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    
  </head>

  <body ng-controller="MainController">
    <h1>{{message}} </h1>
  </body>

</html>

Plunker version prior to 1.3.0

1.3.0之后的版本：

您可以使用 $controllerProvider.allowGlobals() 来启用该行为。

allowGlobals允许$controller找到控制器构造函数窗口

angular.module("ng").config(function($controllerProvider){
  $controllerProvider.allowGlobals();
});

var MainController = function($scope) {

  $scope.message = "Hello";
};

<!DOCTYPE html>
<html ng-app>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script src="script.js"></script>
    <script type="text/javascript">
      function MyController() {}
    </script>
  </head>

    <body ng-controller="MainController">
    <h1>{{message}} </h1>
  </body>
  
</html>

Plunker with versions after 1.3.0

注意：我个人建议使用带模块的最新版本和ng-app="app"格式。

angular.module('myApp',[])
    .controller('MainController',function($scope){ .. your code ...})

Answer 3

你走了!!

 <!DOCTYPE html>
    <html ng-app="app">

      <head>
    <script data-require="angular.js.1.3@*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />

    <script src="script.js"></script>

  </head>

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

</html>

// Code goes here

script.js

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

无法从Angular JS

3 个答案: