Question

我正在尝试学习角度，并尝试了一些代码。我现在使用的代码是：

<!DOCTYPE html>
<html data-ng-app>

<head>
    <title>Using AngularJS Directives and Data Binding</title>
</head>

<body>
    <div data-ng-controller="SimpleController">
        Name: 
        <br />

        <input type="text" data-ng-model = "name" /> {{ name }}
        <br />
        <ul>
            <li data-ng-repeat = "cust in customers | filter:name | orderBy:'city'"> {{ cust.name |uppercase }} - {{cust.city | lowercase}} </li>
        </ul>
    </div>

    <script src ="angular.min.js"></script>

    <script>
        function SimpleController($scope){
            $scope.customers= [
            {name:'John Smith', city:'Phonenix'},
            {name: 'John Doe', city:'Seattle'},
            {name: 'Jane Doe', city: 'Portland'}
            ];
        }
    </script>
</body>

</html>

有人可以指出这里发生了什么以及为什么客户数据没有显示出来？

Answer 1

从Angular 1.3开始，必须在ng-app指令中指定应用程序命名空间。

您必须指定模块名称angular.module("myApp",[])，然后将控制器绑定到该模块

angular.module("myApp",[])
   .controller("SimpleController", SimpleController);

function SimpleController($scope){
        $scope.customers= [
        {name:'John Smith', city:'Phonenix'},
        {name: 'John Doe', city:'Seattle'},
        {name: 'Jane Doe', city: 'Portland'}
        ];
    }
angular.module("myApp",[])
   .controller("SimpleController", SimpleController);

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
<title>Using AngularJS Directives and Data Binding</title>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>

</head>

<body>
<div data-ng-controller="SimpleController">
    Name: 
    <br />

    <input type="text" data-ng-model = "name" /> {{ name }}
    <br />
    <ul>
        <li data-ng-repeat = "cust in customers | filter:name | orderBy:'city'"> {{ cust.name |uppercase }} - {{cust.city | lowercase}} </li>
    </ul>
</div>

</body>

</html>

角度数据-ng-控制器解析问题

1 个答案: