AngularJS：NG-包括和NG-控制器 [英] AngularJS : ng-include and ng-controller
问题描述
我有我与角度构建一个应用程序，我有大约8-10意见打造出来的。
所有的观点有一个共同的页脚，基于视图和一套商业规则，我需要有条件地显示/隐藏一些在页脚的内容。
I have an app which I am building with angular, I have about 8-10 views to build out. All the views have a shared footer, based on the view and a set of business rules i need to conditionally show / hide some of the content on the footer.
所以。
我为每个视图控制器，再一个页脚。
我有共同的页脚布局采用NG-包括，那里的HTML我包括引用的NG-控制器页脚控制器。
So. I have controllers for each view, and then one for the footer. I include the common footer layout using ng-include, where the html I am including references the footer controller in the ng-controller.
的index.html
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
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将达到回父控制器并拉出特定设置基于业务规则的启用/禁用的内容。
Then i had intended that in the FooterController would reach back into the parent controller and pull out the specific settings to enable / disable content based on the business rules.
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?
});
我在这里有这个例子：
<一href=\"http://plnkr.co/edit/ucI5Cu4jjPgZNUitY2w0?p=$p$pview\">http://plnkr.co/edit/ucI5Cu4jjPgZNUitY2w0?p=$p$pview
什么我发现是我，当我到达入父范围拔出它是回来为未定义的内容，我不知道为什么。
What I am finding is that I when I reach into the parent scope to pull out the content it is coming back as undefined, and I am not sure why.
我可以看到通过检查scopeid的范围嵌套到祖父母的水平，我相信这是因为NG-包括下面添加视图范围的额外范围层。
I can see that the scopes are nested to the grandparent level by checking the scopeid, I believe this is because the ng-include adds an extra scope layer below the view scopes.
加分：如果我不能拥有使用$范围对象，并可以用 VAR VM坚持=这一点;这样做的的方式，这将是preferable。但乞丐不能挑肥拣瘦：）
Extra points: If i can not have to use the $scope object and can stick with the var vm = this; way of doing it that would be preferable. But beggars cant be choosers :)
app.controller('MainCtrl', function($scope) {
var vm = this;
非常感谢你在前进。
Thank you very much in advance.
推荐答案
如果您范围的外控制器 VM 和你的内部控制器富，你就可以轻松它们分离和内部控制中的参考虚拟机。
If you scope your outside controller as vm and your inside controller as foo, you can then separate them easily and refer to vm within the inside controller.
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 =此到 VAR自=此的清晰度和降低之间的混淆你的观点和你的控制器。
Note: I renamed your var vm = this to var self = this for clarity and to reduce confusion between your views and your controllers.
期望的输出：
这篇关于AngularJS：NG-包括和NG-控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
