简单的角度代码不起作用

时间:2015-07-23 17:38:20

标签: javascript angularjs angularjs-scope angularjs-controller

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/

4 个答案:

答案 0 :(得分:2)

你错过了补充     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

答案 2 :(得分:1)

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

<强>标记

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

Working Fiddle

答案 3 :(得分:1)

您的HTML必须更改。你需要告诉应用程序启动的角度。默认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

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