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

AngularJS : Nested controllers not working in ng-include

本文关键字：ng-include 不起作用控制器嵌套 AngularJS 更新时间：2023-09-26

根据AngularJS文章（查看嵌套控制器片段），我正在尝试用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"

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

AngularJS中发生了一些意外。

如果您使用ng-include并尝试在该区域注入pageX，而pageX包含一些脚本，在这种情况下，pageX脚本没有执行，因此我只在index.html中编写所有angularJS控制器处理程序，它对我来说很好。像

    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";
    }]);