天天看點

AngularJs controller出錯的問題

剛開始學習angular,沒想到寫的一個小的demo就出錯

代碼如下:

<!DOCTYPE html>

<html ng-app>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="angular.js"></script>

    <!--<script src="controller.js"></script>-->

</head>

<body>

    <!--<p>{{'hello word'}}</p>-->

    <div ng-controller='HelloController'>

        <p>{{greeting.text}}</p>

    </div>

    <script>

        function HelloController($scope){

            $scope.greeting = {

                text:"hello"

            };

        }

    </script>

</body>

</html>

報了一個這樣的錯

Argument 'HelloController' is not a function, got undefined

原因是angular沒法知道你定義的函數是一個controller,angularJs 1.3 中 為了讓 根節點上(rootScope)不再被挂上備援的内容,

是以禁止了直接在根上注冊controller。

是以不能直接使用function XXXcontroller (){ code......}這樣的方式直接注冊監聽器了。以後必須

angular.module('myApp', []).controller('myCtroller',function($scope) {}這樣來将controller注冊到對應的模型上。

改成這樣就沒錯了

<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="angular.js"></script>

</head>

<body>

    <!--<p>{{'hello word'}}</p>-->

    <div ng-controller='HelloController'>

        <p>{{greeting.text}}</p>

    </div>

    <script>

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

        app.controller('HelloController', function ($scope) {

            $scope.greeting = {

                text: 'hello'

            };

        })

    </script>

</body>

</html>

繼續閱讀