AngularJS:ng-include和ng-controller
DSh*_*rty 26 javascript angularjs angularjs-scope angularjs-ng-include
我有一个应用程序,我正在构建角度,我有大约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>
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;
非常感谢你提前.
Kyl*_*uir 32
如果您将外部控制器作为vm内部控制器和内部控制器的范围foo,则可以轻松地将它们分开并参考内部控制器中的vm.
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 footer">
<p>Message from Footer Controller '{{footer.message}}'</p>
<p ng-show="vm.shouldDisplaySomethingInFooter">Conditional footer Content</p>
</div>
app.js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function() {
var self = this;
self.mainMessage = 'Hello world';
self.shouldDisplaySomethingInFooter = true;
});
app.controller('FooterCtrl', function() {
var self = this;
self.message = 'vm footer';
});
注:我改名你var vm = this要var self = this清楚和大家的意见和你的控制器之间减少混乱.
预期产量:
| 归档时间： |
|
| 查看次数： |
60591 次 |
| 最近记录： |