Question

简单的角度应用无法正常工作

以下是代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
        <script>
            angular.module('myApp',[]).controller('SiteController', function($scope)
            {
                $scope.publisher ='sitePoint';
                $scope.type="Web Development";
                $scope.name ="Scope for site controller";
            });
            angular.module('myApp',[]).controller('BookController',function($scope)
            {
                $scope.books=['Jump Start HTML5','Jump Start CSS','Jump Start Responsive Web Design'];
                $scope.name = "Scope for book controller";
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="SiteController">
        <span>{{publisher}} excels in {{type}} books</span>
        <div ng-controller="BookController">
            <h3>Some of the popular books from {{publisher}}</h3>
            <ul>
                <li ng-repeat="book in books">
                    {{book}}
                </li>
            </ul>
        </div>
    </body>
</html>

是不是因为我已经声明了angular.module两次。请检查plunker 我错过了什么？

Answer 1

您无需在此处将数组设置为第二个参数angular.module('myApp',[])。这种语法意味着您正在定义一个新模块。

您可以像这样链接控制器：

        angular.module('myApp',[]).controller('SiteController', function($scope)
        {
            $scope.publisher ='sitePoint';
            $scope.type="Web Development";
            $scope.name ="Scope for site controller";
        })
        .controller('BookController',function($scope)
        {
            $scope.books=['Jump Start HTML5','Jump Start CSS','Jump Start Responsive Web Design'];
            $scope.name = "Scope for book controller";
        });

或者，只使用getter angular.module('myApp')，而不使用第二个参数

        angular.module('myApp',[]).controller('SiteController', function($scope)
        {
            $scope.publisher ='sitePoint';
            $scope.type="Web Development";
            $scope.name ="Scope for site controller";
        });
        angular.module('myApp').controller('BookController',function($scope)
        {
            $scope.books=['Jump Start HTML5','Jump Start CSS','Jump Start Responsive Web Design'];
            $scope.name = "Scope for book controller";
        });

Answer 2

定义模块后，您需要通过提供名称来访问模块。如果再次放置依赖项，它将创建另一个模块..这样做

angular.module('myApp',[]).controller('SiteController',

然后

 angular.module('myApp').controller('BookController'

Answer 3

您的控制器定义错误。

angular.module('myApp',[])

定义新模块。如果为当前模块创建控制器，则必须使用：

angular.module('myApp')

检查此修复版本：$type-operator

Answer 4

第二次在angular.module中删除[]。

检查：http://plnkr.co/edit/1YSpHQTASimeH42QFZgD?p=preview

简单的角度app不工作

4 个答案: