Question

我有以下来自互联网的代码。我已经实现了相同的代码，但它没有显示任何数据。

HTML

<html data-ng-app="">
<head>
    <title>Example 4: Using AngularJS Directives and DataBindings</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container" ng-controller="SimpleController">            
        <h1>AngularJS Second Program</h1>
        <br/>
        Name:
        <br />
        <input type="text" data-ng-model="name" /><br/>
        <br/>
        <ul>
            <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script>
        function SimpleController($scope)
        {
            $scope.customers = [
                {name:'John Doe',city:'New York'},
                {name:'John Smith',city:'Pheonix'},
                {name:'Jane Doe',city:'Chicago'}
                ];
        }
    </script>
    <script src="Styles/jquery.min.js"></script>
    <script src="Styles/js/bootstrap.min.js"></script>
</body>

我还在其中实现了bootstrap，仅用于设计。

上一个例子我已经看到了这个并且工作正常

<html data-ng-app="">
<head>
    <title>Example 3: Using AngularJS Directives and DataBindings</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body data-ng-init="customers=[{name:'John Doe',city:'New York'},{name:'John Smith',city:'Pheonix'},{name:'Jane Doe',city:'Chicago'}]">
    <div class="container">         
        <h1>AngularJS Second Program</h1>
        <br/>
        Name:
        <br />
        <input type="text" ng-model="name" /><br/>
        <br/>
        <ul class="list-group">
            <li class="list-item" data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script src="Styles/jquery.min.js"></script>
    <script src="Styles/js/bootstrap.min.js"></script>
</body>

这只是我的第四个AngularJS示例，所以我完全知道发生了什么。提前致谢

Answer 1

我相信它是角1.2和＆gt;需要初始化应用程序：

angular.module('app', []); // can be named whatever you want of course

然后放入你的ng-app attr：

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

然后通过创建一个新模块来创建控制器：

angular.module('App.Controllers', []) // again naming it whatever you want
    .controller('SimpleController', ['$scope', function($scope){
        // do your controller stuff
    }]);

必须将其添加到应用中：

angular.module('app', ['App.Controllers']);

或者您可以将其创建为应用的一部分：

angular.module('app').controller('SimpleController', ['$scope', function(){
    // NOTICE: I didn't add the [] when using the app module again, this is how you call the module up later on to add things like controllers, directives etc.
}]);

Answer 2

这样做，你需要初始化你的角度应用

<html data-ng-app="myapp">
<head>
    <title>Example 4: Using AngularJS Directives and DataBindings</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
    <div class="container" ng-controller="SimpleController">
        <h1>AngularJS Second Program</h1>
        <br/>
        Name:
        <br />
        <input type="text" data-ng-model="name" /><br/>
        <br/>
        <ul>
            <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script>

    angular.module('myapp', []).controller('SimpleController', ['$scope',
        function($scope) {
            $scope.customers = [
                {name:'John Doe',city:'New York'},
                {name:'John Smith',city:'Pheonix'},
                {name:'Jane Doe',city:'Chicago'}
                ];

        }
    ]);
    </script>
    <script src="Styles/jquery.min.js"></script>
    <script src="Styles/js/bootstrap.min.js"></script>
</body>

Answer 3

只是你的angular.js文件没有被加载或损坏，试试cdn link它的工作正常。

Answer 4

看起来在app模块中没有定义SimpleController。尝试将您的app湖命名为“myApp”，并按照以下方式定义您的控制器：

angular.module('F1FeederApp.controllers', [])
   .controller('simpleController', function($scope) { ...

AngularJS中的$ scope不起作用

4 个答案: