工厂很棒

Question

我刚刚开始学习AngularJS，我在使用地址簿应用程序时遇到了一些麻烦。

据我所知，语法是正确的，但指令没有显示我的scripts.js文件中的信息。我尝试使用“use strict”并将ng-app声明为“AddressBook”，但它只显示屏幕上的指令而不是数据。

我猜我错过了什么，但我不知道是什么。

这是我的代码:( AngularJS现已更新）

旧AngularJS代码：

function PeopleController($scope) {
     "use strict";
     $scope.people = [
          {name: "Dani Moss", phone: "1234567890", city: "Richmond"},
          {name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
          {name: "Little John", phone: "4567853432", city: "Los Angeles"},
          {name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
     ];
}

新角色代码：

var addressBook = angular.module('addressBook', []);

addressBook.controller('PeopleController', ['$scope', function PeopleController($scope) {
     "use strict";
     $scope.people = [
          {name: "Dani Moss", phone: "1234567890", city: "Richmond"},
          {name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
          {name: "Little John", phone: "4567853432", city: "Los Angeles"},
          {name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
     ];
}]);

<!DOCTYPE html>
<html ng-app="AddressBook">

<head>
     <meta charset="UTF-8">
     <title>Address Book</title>
</head>

<body ng-controller="PeopleController">
     <h1>Address Book</h1>
     <div>
          <div ng-repeat="person in people">
               <div>{{person.name}}-{{person.phone}}</div>
               <span>{{person.city}} </span>
          </div>
     </div>
     <!--Javascript-->
     <script src="angular.min.js" type="text/javascript"></script>
     <script src="scripts.js" type="text/javascript"></script>
</body>

</html>

Answer 1

我找到的可能原因是你使用的是最新的角度脚本，但你一直在使用旧方法。全局控制器函数鼓励不良实践，因此angular解析为默认情况下从1.3禁用此行为。

＆＃13;

<!DOCTYPE html>
<html ng-app="AddressBook">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>



<body ng-controller="PeopleController">
     <h1>Address Book</h1>
     <div>
          <div ng-repeat="person in people">
               <div>{{person.name}}-{{person.phone}}</div>
               <span>{{person.city}} </span>
          </div>
     </div>
<script>

var app = angular.module("AddressBook", []);

function PeopleController($scope) {
     //"use strict";
     $scope.people = [
          {name: "Dani Moss", phone: "1234567890", city: "Richmond"},
          {name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
          {name: "Little John", phone: "4567853432", city: "Los Angeles"},
          {name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
     ];
}

</script>
</body>
</html>

＆＃13;

Answer 2

＆＃13;

<!DOCTYPE html>
<html ng-app="AddressBook">

<head>
     <meta charset="UTF-8">
     <title>Address Book</title>
</head>

<body ng-controller="PeopleController">
     <h1>Address Book</h1>
     <div>
          <div ng-repeat="person in people">
               <div>{{person.name}}-{{person.phone}}</div>
               <span>{{person.city}} </span>
          </div>
     </div>
     <!--Javascript-->
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</body>

</html>

＆＃13;

{{ clickCount }}

＆＃13;

Answer 3

工厂很棒

首先不要在你的控制器中设置数据，我知道它可能只是一个测试但是把它放到工厂来复制你的http电话。

.factory ('yourFactory', [ function () {
    return {
        getStuff: function () {
            return //your data
        };
    }
 }]);

传递数据

然后在您的控制器中获取工厂数据并设置范围

.controller ('yourController', [ '$scope', 'yourFactory', function  ($scope, yourFactory) {
    yourFactory.getStuff ().then (function (res) {
        $scope.people = res.data;
    });
}]);

结论

拥有适当的数据流可以解决数据相关的问题。在每一步执行console.log都可以让您以当前形式查看结果数据。在尝试从变量中获取数据时，请使用此功能。

祝你好运

免责声明手机内存写的代码。

Answer 4

在HTML文件中，您使用了<html ng-app="AddressBook">，并在脚本文件中使用了

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

您必须在两个地方使用相同的名称。因此，您可以通过更改脚本文件

来解决此问题

var addressBook = angular.module('AddressBook', [])

AngularJS地址簿

4 个答案:

工厂很棒

传递数据

结论