个人中心
gpt4 book ai didi

javascript - 简单的 AngularJS Controller 不起作用

转载 作者：行者123 更新时间：2023-11-30 06:52:10 25 4
gpt4 key购买 nike

我已经搜索并阅读了所有可能的解释，但到目前为止没有任何帮助。问题是使用大括号的数据绑定(bind)不起作用(只有当我在 index.html 中定义模块和 Controller 时它才起作用)。

索引.html :

<html lang="en" data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen">
<script src="controllers/listcontroller.js"></script>
<script src="js/app.js"></script>
<script data-require="angular.js@*" data-semver="2.0.0" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
</head>
<div class="main">
<body data-ng-controller="ListController">
      <ul>
        <li data-ng-repeat="test in tests">
        <span>{{ test.name }}</span>
        <p>{{ test.type }}</p>
        </li>
      </ul>
    There are currently {{test.length}} tests available.
    You have currently selected 0 tests.
    <button class="animatedbutton"> Proceed </button>

</div>
</body>
</html>

app.js(在文件夹 js 中):

(function () {
'use strict';
angular.module('myApp', ['myApp.controller']);
})();

listcontroller.js(在文件夹 Controller 中):

(function () {
'use strict';
var app = angular.module('myApp.controller');
app.controller('ListController', ['$scope', function ($scope) {
      $scope.tests = [
                      {'name': 'A',
                       'type': '1'},
                      {'name': 'B',
                       'type': '2'},];
}]);
})();

View 向我展示了这样的内容:

  • {{ test.name }}

{{ test.type }}

There are currently {{test.length}} tests available. You have currently selected 0 tests.

我学习了几个教程，例如 Angular in 60 Minutes，AngularJS.org , YT 上也有，但我总是遇到同样的问题。有什么想法吗？

最佳答案

有几个问题看plunker:

https://plnkr.co/edit/bnYAsGk273kO5znMnAJh

index.html

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

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>

  <script src="listcontroller.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="ListController">
  <div class="main">
    <ul>
      <li ng-repeat="test in tests">
        <span>{{ test.name }}</span>
        <p>{{ test.type }}</p>
      </li>
    </ul>

    There are currently {{test.length}} tests available. You have currently selected 0 tests.
    <button class="animatedbutton"> Proceed </button>
  </div>
</body>

</html>

应用程序.js

(function() {
  'use strict';
  angular.module('myApp', ['myApp.controller']);
})();

列表 Controller .js

(function() {

  var ctr = angular.module('myApp.controller', []);
  ctr.controller('ListController', ['$scope',
    function($scope) {
      $scope.tests = [{'name': 'A','type': '1'}, {'name': 'B','type': '2' }];
    }
  ]);
})();

关于javascript - 简单的 AngularJS Controller 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36846295/

25 4 0
文章推荐： javascript - 更新 Cesium 回调属性导致实体闪烁
文章推荐： javascript - 使用单独列过滤的状态保存
文章推荐： java - 将有序 int 数组转换为有序数组列表时出现问题
文章推荐： java - 分布式环境中的ExecutorCompletionService.take()方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com