Question

我正在学习angularJS，并且无法从培训视频中获取以下示例代码以进行运行。有人能告诉我哪里出错了吗？

当我从第二个版本更改它时，它停止工作，如下所示。第二个版本工作正常，但是当我尝试模块化控制器时，它会中断。

<html ng-app="demoApp">
    <head>
        <title>Hello World, AngularJS</title>
    </head>
    <body>
        <div ng-controller="SimpleController">
            <br/>
            <input type="text" ng-model="name"/>
            <br/>
            <ul>
                <li ng-repeat="cust in customers | filter:name | orderBy:salary">
                    {{ cust.name | uppercase}} -
                    {{ cust.city | lowercase }} -
                    {{ cust.salary | currency }}
                </li>
            </ul>
        </div>
        <script>
        var demoApp = angular.module('demoApp',[]);

        demoApp.controller('SimpleController', ['', function($scope){
            $scope.customers = [
                {name: 'John Smith',     city: 'Phoenix',     salary: 90000, hired: '2014-04-04'},
                {name: 'Jenny Linn',     city: 'New York',    salary: 94000, hired: '2014-04-04'},
                {name: 'Johnson Holmes', city: 'Los Angeles', salary: 96000, hired: '2014-04-04'},
                {name: 'Thomas Muffin',  city: 'Chicago',     salary: 80000, hired: '2014-04-17'}
            ]}])
        </script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    </body>
</html>

有效的版本：

 <html ng-app="">
  <head>
    <title></title>
  </head>
  <body>
    <div ng-controller="SimpleController">
      <input type="text" ng-model="nameInput" /> <span style="font-weight:bold"> {{ nameInput }}</span>
      <h3>Listing1</h3>
      <ul>
        <li ng-repeat="cust in customers | filter: nameInput | orderBy: 'city' ">
          {{ cust.name | uppercase }} - {{ cust.city }} - {{ cust.salary }} - {{ cust.hired | date:'yyyy-MM-dd' }}
        </li>
      </ul>
    </div>
    <script>
    function SimpleController($scope) {
    $scope.customers =    [
        {name: 'John Smith',      city: 'Phoenix',       salary: 90000,  hired: '2014-04-04'},
        {name: 'Jenny Linn',      city: 'New York',      salary: 94000,  hired: '2014-04-04'},
        {name: 'Johnson Holmes',  city: 'Los Angeles',   salary: 96000,  hired: '2014-04-04'},
        {name: 'Thomas Muffin',   city: 'Chicago',       salary: 80000,  hired: '2014-04-17'}
    ];    }
    </script>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
  </body>
</html>

Answer 1

您需要在模块化示例中将$ scope传递给控制器

demoApp.controller('SimpleController', ['$scope', function($scope){
        $scope.customers = [
            {name: 'John Smith',     city: 'Phoenix',     salary: 90000, hired: '2014-04-04'},
            {name: 'Jenny Linn',     city: 'New York',    salary: 94000, hired: '2014-04-04'},
            {name: 'Johnson Holmes', city: 'Los Angeles', salary: 96000, hired: '2014-04-04'},
            {name: 'Thomas Muffin',  city: 'Chicago',     salary: 80000, hired: '2014-04-17'}
        ]}])

Answer 2

这里有两个问题。

首先，您需要将字符串文字'$scope'注入控制器。

您的角度脚本文件必须在其他与角度相关的文件之前呈现。即将<script src = 'google api here'>放在所有其他JavaScript标记之前。

<html ng-app="demoApp">
<head>
<title>Hello World, AngularJS</title>
</head>
<body>
<div ng-controller="SimpleController">
    <br/>
    <input type="text" ng-model="name"/>
    <br/>
    <ul>
        <li ng-repeat="cust in customers | filter:name | orderBy:salary">
            {{ cust.name | uppercase}} -
            {{ cust.city | lowercase }} -
            {{ cust.salary | currency }}
        </li>
    </ul>
    </div>
     <!-- load your angular core script files first -->
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
     <script>
       var demoApp = angular.module('demoApp',[]);

       demoApp.controller('SimpleController', ['$scope', function($scope){
         $scope.customers = [
        {name: 'John Smith',     city: 'Phoenix',     salary: 90000, hired: '2014-04-04'},
        {name: 'Jenny Linn',     city: 'New York',    salary: 94000, hired: '2014-04-04'},
        {name: 'Johnson Holmes', city: 'Los Angeles', salary: 96000, hired: '2014-04-04'},
        {name: 'Thomas Muffin',  city: 'Chicago',     salary: 80000, hired: '2014-04-17'}
    ]}])
     </script>
 </body>
</html>

这是working plnkr。

让Angular示例运行

2 个答案: