Question

导入 angular js 时出错

2017-08-29

2279

javascript angularjs

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

  <div ng-app="myApp" ng-controller="myCntrl">
    First Name : <input type="text" ng-model="firstName"> <br>
    Last Name : <input type="text" ng-model="lastName"> <br>
    <br>
    Full Name: {{firstName + " " + lastName}}
  </div>

  <script>
  var person={
    firstName = "john" ,
    lastName = "Doe"
  };

  var app = angular.module('myApp', []);
  app.controller('myCntrl', function($scope){
    $scope.firstName = person.firstName;
    $scope.lastName = person.lastName
  });
  </script>
</body>
</html>

但是我在运行时得到了这个

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/ $injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.4%2F%24injector%2Fnomod%3Fp0%3DmyApp%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A6%3A425%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A26%3A270%0A%20%20%20%20at%20b%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A25%3A299)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A26%3A44%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A42%3A117%0A%20%20%20%20at%20q%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A7%3A495)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A41%3A476)%0A%20%20%20%20at%20eb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A46%3A44)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A21%3A373)%0A%20%20%20%20at%20Sc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A22%3A179) at angular.js:38 at angular.js:4920 at q (angular.js:403) at g (angular.js:4880) at eb (angular.js:4802) at c (angular.js:1914) at Sc (angular.js:1935) at ue (angular.js:1820) at angular.js:33367 at HTMLDocument.b (angular.js:3431)

有什么帮助吗？

Answer 1

您必须在 angular 范围内使用正确的语法正确声明 person 对象。因此，请将您的对象移到控制器内。

var app = angular.module('myApp', []);
  app.controller('myCntrl', function($scope) {
      var person = {
          firstName: "john",
          lastName: "Doe"
      };
      $scope.firstName = person.firstName;
      $scope.lastName = person.lastName
  });

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
    <div ng-app="myApp" ng-controller="myCntrl"> First Name :
        <input type="text" ng-model="firstName">
        <br> Last Name :
        <input type="text" ng-model="lastName">
        <br>
        <br> Full Name: {{firstName + " " + lastName}} </div>
</body>

</html>