AngularJS的继承控制器[重复]

Posted 2023-02-23

【中文标题】AngularJS的继承控制器[重复]

【英文标题】：Inheritance controllers with AngularJS [duplicate]

【发布时间】：2020-06-24 17:04:04

【问题描述】：

我在 AngularJs 中包含 JSP 文件的应用程序的前面部分。

index.jsp 使用指令 ng-view 来显示视图：

index.jsp

<div ng-view autoscroll="true" style="overflow: auto;"></div>

app.js 和 $routeProvider 将控制器链接到视图（home.jsp 包含一些views.jsp）：

app.js

$routeProvider
.when('/Error', 
    controller: 'LoginController',
    templateUrl: 'modules/authentication/views/errorConnexion.jsp',
    hideMenus: true
)
.when('/', 
    controller: 'HomeController',
    templateUrl: 'modules/home/views/home.jsp'
)
.otherwise( redirectTo: '/login' );

而我的 HomeController 使用字段来隐藏或显示一些 DOM 元素：

HomeController.js

app.controller('HomeController',
                ['$timeout',
                'service',
                '$scope',
                '$rootScope',
                '$filter',
                '$location',
                '$window',
                'ModalService',
                'ngTableParams',
                '$http',
                '$interval',
                'Excel',
                function($timeout, service, $scope,
                        $rootScope, $filter, $location, $window,
                        ModalService, ngTableParams, $http, $interval, Excel) 

    $scope.Hide_Module = true;
)]);

我的控制器孩子：

ChildController.js

app
.controller('ChildController',
    function()         
        $scope.field = "random";            
    
);

最后是问题，视图：

view.jsp

<section ng-controller="ChildController" class="content"
         ng-hide="Hide_Module">

问题是：如果我删除部分标签上的 ng-controller 指令，一切都会好的。 但是如果我添加它，主视图（index.jsp）显示view.jsp......

所以我想知道我做错了什么以及angularjs如何处理控制器继承以及它们如何通过视图绑定？

【问题讨论】：

由ng-view 指令和ng-controller 指令实例化的控制器从父作用域继承作用域属性。

【参考方案1】：

自己找出来，我的项目中有两个错误：

缺少控制器文件的链接

<script src="modules/controllers/sub/childController.js"></script>

（在 index.jsp 中添加）

---

仅在对象语法中通过 $scope 变量共享数据

在父控制器中定义 $scope.myObject = key: value, ... 而不是原语和数组。 在子控制器中添加 $scope 参数为：

app.controller('ChildController', ['$scope', function($scope)   ]);

【讨论】：

这并不完全正确。子作用域继承原语以及对象。对原语进行分配时应谨慎。对原语的赋值可能会导致数据隐藏问题。