AngularJS:嵌套控制器不在ng-include中工作

时间:2015-10-29 14:07:34

标签: javascript java angularjs

根据AngularJS article(看看嵌套控制器片段),我试图用ng-include实现嵌套控制器

的index.html

<body id="spaWrapperApp" ng-app="spaWrapperApp">
        <div class="container-fluid" id="wrapper" ng-controller="mainController">
            <div class="navigation">
                <a href="javascript:void(0);" ng-click="requestPage('sample3_nestedApps_f1.html')">
                    <span>Page 1</span>
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="javascript:void(0);" ng-click="requestPage('sample3_nestedApps_f2.html')">
                    <span>Page 2</span>
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="javascript:void(0);" ng-click="requestPage('sample3_nestedApps_f3.html')">
                    <span>Page 3</span>
                </a>
            </div>
            <div id="content" >
                <div ng-include="currentPage"></div>
            </div>
        </div>

        <script type="text/javascript">
            window.spaWrapperApp = angular.module('spaWrapperApp',[]);

            spaWrapperApp.controller('mainController',['$scope',function($scope){

                $scope.currentPage = "sample3_nestedApps_f1.html";

                console.log($scope);
                $scope.requestPage = function(friendlyURL){
                    console.log(friendlyURL);
                    $scope.currentPage = friendlyURL;
                }
            }]);


        </script>
    </body>

Page1 (下面给出的代码)文件将在ng-include中注入

<div>Testing page include 1</div>
<hr/>
<br/>
<div ng-controller="FirstController">
    <p>1# {{ name }}</p>
    <div ng-controller="SecondController">
        <p>2# {{ name }}</p>
    </div>
</div>
<script type="text/javascript">
    spaWrapperApp.controller('FirstController',['$scope',function($scope){
        $scope.name = "FirstController Name";
    }]);
    spaWrapperApp.controller('SecondController',['$scope',function($scope){
        $scope.name = "SecondController Name";
    }]);
</script>

在整个案例中,最终结果将是嵌套在ng-include区域中的控制器。

问题是当我运行该代码的时候,这个错误会显示给我。

"Error: [ng:areq] Argument 'FirstController' is not a function, got undefined" 

知道到底出了什么问题吗?

1 个答案:

答案 0 :(得分:0)

AngularJS中出现意外情况。

如果您正在使用 ng-include 并尝试在该区域中注入pageX而pageX包含一些脚本,那么pageX脚本未执行,为此我只需编写所有angularJS控制器处理程序仅限index.html,它对我来说很好。 喜欢

    window.spaWrapperApp = angular.module('spaWrapperApp',[]);
    spaWrapperApp.controller('mainController',['$scope',function($scope){
        $scope.currentPage = "sample3_nestedApps_f1.html";
        $scope.requestPage = function(friendlyURL){
            $scope.currentPage = friendlyURL;
        }
    }]);
    spaWrapperApp.controller('FirstController',['$scope',function($scope){
        $scope.name = "FirstController Name";
    }]);
    spaWrapperApp.controller('SecondController',['$scope',function($scope){
        $scope.name = "SecondController Name";
    }]);