我正在使用angular构建一个应用程序,需要构建8-10个视图。
所有视图都有一个共享底部,在基于视图和一组业务规则的情况下,我需要有条件地显示/隐藏底部的某些内容。
因此, 我为每个视图单独编写了控制器,并编写了一个底部控制器。 我使用ng-include包含共同的底部布局,其中包含的html引用底部控制器在ng-controller中。
Index.html
我希望每个视图控制器都能确定页脚的状态以及特定内容是否隐藏。 (shouldDisplaySomthingInFooter 如下)
非常感谢你提前的帮助。
因此, 我为每个视图单独编写了控制器,并编写了一个底部控制器。 我使用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>
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>
我希望每个视图控制器都能确定页脚的状态以及特定内容是否隐藏。 (shouldDisplaySomthingInFooter 如下)
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.mainMessage= 'HEELO';
vm.shouldDisplaySomthingInFooter = true;
window.console.log('Main scope id: ' + $scope.$id);
});
我原本打算在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: ' + $scope.$parent.$parent.$id);
window.console.log('Footer grandparent scope name: ' + $scope.$parent.$parent.mainMessage);
window.console.log('Footer grandparent scope condition: ' + $scope.$parent.$parent.shouldDisplaySomthingInFooter);
vm.showSomthing = false; //how to pull from parent scope to bind the ng-show to a value set in the parent from within a ng-include?
});
我这里有一个例子: http://plnkr.co/edit/ucI5Cu4jjPgZNUitY2w0?p=preview
我的问题是,当我进入父级作用域以提取内容时,它返回未定义,我不知道为什么。
通过检查scopeid,我可以看到作用域嵌套到祖父级别,我认为这是因为ng-include在视图作用域下添加了一个额外的作用域层。
额外提示:如果我不使用 $scope 对象,而是坚持使用 var vm = this;
的方式来完成它,那将更可取。但乞丐没有选择 :)
app.controller('MainCtrl', function($scope) {
var vm = this;
非常感谢你提前的帮助。