简单 Angular 代码无效

Question

HTML

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

JS

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/

Answer 1

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

标记

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

Working Fiddle

Answer 2

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

查看更新后的fiddle Fiddle

除此之外你还需要添加

angular 1.2.1

和

No wrap in head

在框架和扩展中。 .

Answer 3

您的 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 指令来声明控制器。

Answer 4

请找到以下工作代码：

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

简单 Angular 代码无效

Simple Angular code not working

javascript

angularjs

angularjs-scope

angularjs-controller