Angular JS 错误

Question

我在我的 asp.net mvc 项目中包含 angular js 但是当我在控制器中调用对象时

angular js 表达式不求值

这里是app.js代码请建议

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

这里是 createController 代码

var createController = function ($scope) {
    $scope.mydata = 'I work!';
}

这是我在 html 中包含的内容

<html ng-app="app">
   <script src="~/Scripts/angular.min.js"></script>
    <script src="~/appAjs/app.js"></script>
    <script src="~/appAjs/controllers/createController.js"></script>
 <div ng-controller="createController">
{{scope.mydata}}
{{6+9}}

Answer 1

您需要在应用模块的上下文中创建控制器。

你的app.js应该只有

angular.module('app', []);

您的 createController 代码应该类似于此

angular.module('app')
   .controller('createController', function ($scope) {
     $scope.mydata = 'I work!';
   });

Answer 2

您需要更改表达式

{{scope.mydata}}

至

{{mydata}}

表达式可以访问作用域，访问作用域对象不需要关键字。

Answer 3

根据你的代码，我只能怀疑两个件事

您的 javascript 范围不正确
不要在您的 "scope" 代码中使用 scope 一词

第一部分：javascript范围：

始终使用 IIFE，在您的情况下，您的代码应如下所示：

(function(){

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

  var createController = function ($scope) {
    $scope.mydata = 'I work!';
  };


  app.controller('createController', createController);

}());

第二部分：不要使用scope

这个词

在你的 HTML 中，你不应该使用 scope 这个词，因为它已经在你的控制器中继承了，因为这是你传递给 "view"

的模型

因此，您的代码应如下所示：

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-controller="createController">
    {{mydata}}
    {{6+9}}
  </div>
</body>
</html>

结果是：

I work! 15

JSBIN so you can check it out.

中的实时代码

您的 HTML 页面，全部应该如下所示：

如果您只有一个文件

<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>My AngularJs App</title>
</head>
<body>

  <!-- HTML -->
  <div ng-controller="createController">
    {{mydata}}
    {{6+9}}
  </div>

  <!-- AngularJS required -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

  <!-- AngularJS code -->
  <script>

      (function(){

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

        var createController = function ($scope) {
          $scope.mydata = 'I work!';
        };

        app.controller('createController', createController);

      }());

  </script>
</body>
</html>

如果您正在使用 2 个文件

文件index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>My AngularJs App</title>
</head>
<body>

  <!-- HTML -->
  <div ng-controller="createController">
    {{mydata}}
    {{6+9}}
  </div>

  <!-- AngularJS required -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

  <!-- AngularJS extra files -->
  <script src="createController.js"></script>

</body>
</html>

文件createController.js（在与index.html相同的文件夹中）

      (function(){

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

        var createController = function ($scope) {
          $scope.mydata = 'I work!';
        };

        app.controller('createController', createController);

      }());

Answer 4

我认为问题很可能是您包含脚本的顺序：

尝试以下操作：

<script src="~/Scripts/angular.min.js"></script>
<script src="~/appAjs/controllers/createController.js"></script>
<script src="~/appAjs/app.js"></script>

推理是 app.js 尝试使用尚未定义的函数来定义控制器，而该函数是运行。

{{scope.data}} 应该是 {{data}} 的点是正确的，但不解释 {{6+9}} 不起作用。

Angular JS 错误

Error in Angular JS

javascript

jquery

angularjs

如果您只有一个文件

如果您正在使用 2 个文件

Angular JS 错误

Error in Angular JS

javascript

jquery

angularjs

如果您只有 一个文件

如果您正在使用 2 个文件

如果您只有一个文件