Question

我目前正在处理角度js的问题（仅使用它一段时间）。为了解决这个问题，我试图通过使用我的工作的副本并删除其他不需要的东西来隔离它。

我添加了一段特定的代码，我知道这段特定代码应该正常工作，但事实并非如此。在我甚至可以尝试整合它并查看它是否真的与它一起工作之前，我需要尝试弄清楚它是否确实存在问题。

我还为此目的创建了js文件和css的新外部副本，并正确链接了它们。

基本上，我遇到的问题是我在浏览器中看到这段代码而不是应该写的实际文本：

我在浏览器中看到了这一点（浏览器中启用了脚本）...

{{phone.name}} {{phone.snippet}}

但显然，这不应该是出现的事情。

这是html：

<!doctype html>
<html ng-app="phonecatApp">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="css/bootstraptwo.css" />
</head>

<body ng-controller="PhoneListCtrl">
    <script type="text/javascript" src="js/apptwo.js"></script>
    <script type="text/javascript" src="js/angulartwo.js"></script>


  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="col-md-10">
        <!--Body content-->

        <ul class="phones">
          <li ng-repeat="phone in phones">
            <span>{{phone.name}}</span>
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

      </div>
    </div>
  </div>

</body>
</html>

这是角度：

(function(){


'use strict';

/* Controllers */

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

phonecatApp.controller('PhoneListCtrl', function($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.',
     'age': 1},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 2},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 3}
  ];

  $scope.orderProp = 'age';
});

});

Answer 1

您错过了依赖注入的部分内容，并声明了如何声明控制器：

phonecatApp.controller('PhoneListCtrl', ['$scope', function($scope) {

AngularJS没有连接控制器（？）

1 个答案: