简单的 Angular 代码不起作用答案

【问题标题】：Simple Angular code not working简单的 Angular 代码不起作用
【发布时间】：2015-07-23 17:38:19
【问题描述】：

HTML

<section ng-app="app">
     <table ng-controller="VoicemailsCtrl">
        <caption>{{test}}</caption>
    </table>
</section>

var app = angular.module('app', [])
              .controller('VoicemailsCtrl', ['$scope', VoicemailsCtrl]);

function VoicemailsCtrl($scope, $http)
{
    $scope.vms = [1,2,3];
    $scope.test = 'this is a test';
}

可见于：

http://jsfiddle.net/tx9nbo8g/6/

【问题讨论】：

标签： javascript angularjs angularjs-scope angularjs-controller

【解决方案1】：

您错过了添加 ng-app="app" 在该部分。

检查更新的小提琴 Fiddle

除此之外你还需要添加

角度 1.2.1

和

头部不换行

在框架和扩展中。 .

【讨论】：

不，我没有，它就在那里，
原来的小提琴里没有。
谢谢您，先生。为所有人 +1

【解决方案2】：

请在下面找到工作代码：

HTML：

<body ng-app="app">
    <section>
        <table ng-controller="VoicemailsCtrl">
            <caption>{{test}}</caption>
        </table>
    </section>
</body>

Js：

var app = angular.module('app', []);
app.controller('VoicemailsCtrl', ['$scope','$http',VoicemailsCtrl]); //You forgot to add $http

function VoicemailsCtrl($scope, $http) {
    $scope.vms = [1,2,3];
    $scope.test = 'this is a test';
}

http://plnkr.co/edit/qCsG4WzFc0Irt2RobLoC?p=preview

【讨论】：

【解决方案3】：

在 section 元素上添加 ng-app="app" 并且您还需要将小提琴中的脚本加载选项从 OnLoad 更改为 No Wrap in <head/>

标记

<section ng-app="app">
    <table ng-controller="VoicemailsCtrl">
        <caption>{{test}}</caption>
    </table>
</section>

Working Fiddle

【讨论】：

【解决方案4】：

您的 HTML 必须更改。您需要告诉 Angular 应用程序的启动位置。默认ng-app 也是一个有效的应用声明。

 <section ng-app="MyApp">
         <table ng-controller="VoicemailsCtrl">
            <caption>{{test}}</caption>
        </table>
    </section>

在控制器中

 angular.module('MyApp', [])
 .controller('VoicemailsCtrl', ['$scope', function ($scope){
    $scope.vms = [1,2,3];
    $scope.test = 'this is a test';
 }]);

fiddle

您不应该使用控制器的全局声明。它在 Angular 1.3+ 版本中已被弃用。你应该使用controller 指令来声明一个控制器。

【讨论】：

控制器的声明绝对没问题。虽然它会出现在全局命名空间中，但它根本没有被弃用。它仍然使用控制器来注册控制器。
@AbhishekPrakash，这是真的。但在 Angular 1.3+ 版本中，全局声明将不起作用。
你能分享一个官方链接吗？原因是我使用 1.4.* 并使用相同的方式声明控制器。
@AbhishekPrakash 顺便说一句，您可以自己获得它，但这里是 stackoverflow.com/questions/31346238/…。罗尼的评论会让你清楚。
请检查，他指的代码没有使用module.controller()注册构造函数。不推荐直接使用构造函数作为控制器。