javascript - Angular JS 中的错误

标签 javascript jquery angularjs

我在我的 asp.net mvc 项目中包含了 Angular js,但是当我在 Controller 中调用对象时

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}}

最佳答案

从你的代码中,我只能怀疑件事

  • 您的 JavaScript 没有适当的范围
  • 不要使用“scope”这个词在你的“范围”代码中

第一部分:JavaScript 范围:

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

(function(){

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

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


  app.controller('createController', createController);

}());

第二部分:不要使用scope这个词

在 HTML 中,不应使用单词 scope因为它已经在您的 Controller 中继承,因为这是您传递给“ 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);

      }());

关于javascript - Angular JS 中的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27784547/

相关文章:

javascript - 使用 JavaScript 检测文本中的 URL

javascript - 在调用函数时传递附加参数

javascript - 如何控制数字生成器

javascript - C3图表在 Angular Directive(指令)中调整大小

javascript - angularjs 和 mocha 测试 Uncaught TypeError : (window. beforeEach || window.setup) 不是函数

javascript - React Js 从另一个顶级组件中提取变量

javascript - 使 NbAlertComponent 的关闭按钮起作用的正确方法是什么(关闭警报)

javascript - 获取左侧导航链接以保持打开和事件状态

javascript - 将用户重定向到 ASP.net 中 IE 中后退按钮上的自定义页面

angularjs - 为什么我的指令获得 el[0] 的 "empty"边界客户端矩形?