Question

我是角度JS的新手，我正在尝试一个简单的模块，我收到了这个错误。

我的HTML看起来像这样：

  <!DOCTYPE html>
<html >

  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body data-ng-app="Testingng">
    <div data-ng-controller="MainController" ></div>
    <h1>{{message}}</h1>
    <div> First Name: {{person.firstName}}</div>

  </body>

</html>

和JS看起来像这样

  angular.module('Testingng', []).controller('MainController', ['$scope', function MainController($scope) {
      var person = {

        firstName: "Test",
        lastName: "Test",
        imageSrc: "C:\Users\Test\Downloads\20160604_142346.jpg"

      };

      $scope.message = "Hello Angular";
      $scope.person = person;

    };
  }]);

我也试过这个JS，它没有给出任何错误，但没有显示数据。

(function() {

  angular
    .module("Testingng", [])
    .controller("MainController", function($scope) {

      var person = {

        firstName: "Test",
        lastName: "Test",
        imageSrc: "C:\Users\Test\Downloads\20160604_142346.jpg"

      };

      $scope.message = "Hello Angular";
      $scope.person = person;

    });

})();

任何人都可以告诉我我做错了什么吗？提前谢谢！

Answer 1

您的代码存在两个问题

（i）您的控制器应该是，

 .controller('MainController', ['$scope', function($scope) {

（ii）打印变量后应关闭div，否则无法访问 $scope 变量。

<div ng-controller="MainController" >
    <h1>{{message}}</h1>
    <div> First Name: {{person.firstName}}</div>
</div>

<强>样本

＆＃13;

angular.module('Testingng', [])
.controller('MainController', ['$scope', function($scope) {
      var person = {
        firstName: "Test",
        lastName: "Test",
        imageSrc: "C:\Users\Test\Downloads\20160604_142346.jpg"

      };

      $scope.message = "Hello Angular";
      $scope.person = person;
   
  }]);

＆＃13;

 <!DOCTYPE html>
<html >
  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />  
  </head>
  <body ng-app="Testingng">
    <div ng-controller="MainController" >
    <h1>{{message}}</h1>
    <div> First Name: {{person.firstName}}</div>
  </body>
</html>

＆＃13;

Answer 2

试试这个

＆＃13;

angular.module('Testingng', [])
.controller('MainController', ['$scope', function($scope) {
      var person = {
        firstName: "Test",
        lastName: "Test",
        imageSrc: "C:\Users\Test\Downloads\20160604_142346.jpg"

      };

      $scope.message = "Hello Angular";
      $scope.person = person;
   
  }]);

＆＃13;

<!DOCTYPE html>
<html >
  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />  
  </head>
  <body ng-app="Testingng">
    <div ng-controller="MainController" >
      <h1>{{message}}</h1>
      <div> First Name: {{person.firstName}}</div>
    </div>
  </body>
</html>

＆＃13;

您的div已关闭，因此无法解析范围变量。

角度误差：$ injector：modulerr模块错误

2 个答案: