Question

我无法弄清楚为什么以下代码根本不起作用。坦率地说，它看起来不错。有什么想法吗？

<!DOCTYPE html>
<html data-ng-app="">
    <head>
        <title>Using AngularJS to create a simple Controller</title>
    </head>
    <body>
        <div data-ng-controller="simpleController">
            <ul>
                <li data-ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li>
            </ul>
        </div>
        
        <script
                type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js">
        </script>
        <script>
            function simpleController($scope) {
                $scope.customers = [
                    { Name: "Dave Jones",  City: "Phoenix" }
                    , { Name: "Jamie Riley", City: "Atlanta" }
                    , { Name: "Heedy Walhin", City: "Chandler" }
                    , { Name: "Thomas Winter", City: "Seattle" }
                ];
            }
        </script>
    </body>
</html>

Answer 1

这与你正在使用的角度版本有关。

早期版本的Angular允许将控制器功能分配给全局范围，就像您一样。然后从角度移除了这种能力。然而，仍有很多教程可以参考这种较旧的风格。

请参阅演示 - http://jsbin.com/fowamutoli/1/edit

我已经用angular legacy代替了你的代码。

所以将来你需要声明一个角度模块并注册你的控制器。即。

<html data-ng-app="app">


 <script>

        var app = angular.module('app', []).  
            controller('simpleController', function ($scope) {
                $scope.customers = [
                    { Name: "Dave Jones",  City: "Phoenix" }
                    , { Name: "Jamie Riley", City: "Atlanta" }
                    , { Name: "Heedy Walhin", City: "Chandler" }
                    , { Name: "Thomas Winter", City: "Seattle" }
                ];
            });
  </script>

Answer 2

https://docs.angularjs.org/guide/controller

尝试将您的data-ng-app替换为ng-app =“myApp”，看看它是否有效。 :)使用以下代码段。

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

myApp.controller('simpleController', ['$scope', function($scope) {
  $scope.customers = [
                { Name: "Dave Jones",  City: "Phoenix" }
                , { Name: "Jamie Riley", City: "Atlanta" }
                , { Name: "Heedy Walhin", City: "Chandler" }
                , { Name: "Thomas Winter", City: "Seattle" }
            ];
}]);

Answer 3

请改为尝试：

<!DOCTYPE html>
<html ng-app="MyApp">
    <head>
        <title>Using AngularJS to create a simple Controller</title>
    </head>
    <body>
        <div ng-controller="simpleController">
            <ul>
                <li ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li>
            </ul>
        </div>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
        <script>
            var myApp = angular.module( "MyApp", [] );
            myApp.controller("simpleController", function( $scope )
            {
                $scope.customers = [
                    { Name: "Dave Jones",  City: "Phoenix" }
                    , { Name: "Jamie Riley", City: "Atlanta" }
                    , { Name: "Heedy Walhin", City: "Chandler" }
                    , { Name: "Thomas Winter", City: "Seattle" }
                ];
            });
        </script>
    </body>
</html>

http://jsfiddle.net/rv7r7nv7/

AngularJS data-ng-controller不起作用

3 个答案:

这与你正在使用的角度版本有关。