我有一个应用程序,我正在构建角度,我有大约8-10个视图来构建.所有视图都有一个共享的页脚,基于视图和一组业务规则,我需要有条件地显示/隐藏页脚上的一些内容.
所以.我有每个视图的控制器,然后一个页脚.我使用ng-include包含公共页脚布局,其中我包含的html引用了ng-controller中的页脚控制器.
的index.html
<body ng-controller="MainCtrl as vm">
<p>Message from Main Controller '{{vm.mainMessage}}'</p>
<div ng-include="'commonFooter.html'"></div>
</body>
Run Code Online (Sandbox Code Playgroud)
commonFooter.html
<div ng-controller="FooterCtrl as vm">
<p>Message from Footer Controller '{{vm.message}}'</p>
<p ng-show="vm.showSomthing">Conditional footer Content</p>
</div>
Run Code Online (Sandbox Code Playgroud)
我希望每个视图控制器确定页脚的状态以及是否隐藏特定内容.(下面的shouldDisplaySomthingInFooter)
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.mainMessage= 'HEELO';
vm.shouldDisplaySomthingInFooter = true;
window.console.log('Main scope id: ' + $scope.$id);
});
Run Code Online (Sandbox Code Playgroud)
然后我打算在FooterController中返回到父控制器并提取特定设置以根据业务规则启用/禁用内容.
app.controller('FooterCtrl', function($scope) {
var vm = this;
vm.message = 'vm footer';
window.console.log('Footer scope id: ' + $scope.$id);
window.console.log('Footer parent scope id: ' + $scope.$parent.$id);
window.console.log('Footer grandparent scope id: …Run Code Online (Sandbox Code Playgroud)