AngularJS:ng-include 和 ng-controller [英] AngularJS : ng-include and ng-controller
问题描述
我有一个使用 angular 构建的应用程序，我有大约 8-10 个视图要构建.所有视图都有一个共享页脚，基于视图和一组业务规则，我需要有条件地显示/隐藏页脚上的一些内容.
所以.我有每个视图的控制器，然后是页脚的控制器.我使用 ng-include 包含了常见的页脚布局，其中我包含的 html 引用了 ng-controller 中的页脚控制器.
索引.html
<p>来自主控制器'{{vm.mainMessage}}'的消息</p><div ng-include="'commonFooter.html'"></div>commonFooter.html
<p>来自页脚控制器'{{vm.message}}'的消息</p><p ng-show="vm.showSomthing">条件页脚内容</p>我希望每个视图控制器确定页脚的状态以及特定内容是否隐藏.(下面应该显示SomthingInFooter)
app.controller('MainCtrl', function($scope) {var vm = 这个；vm.mainMessage = 'HEELO';vm.shouldDisplaySomthingInFooter = true;window.console.log('主作用域 id:' + $scope.$id);});然后我打算在 FooterController 中返回父控制器并提取特定设置以根据业务规则启用/禁用内容.
app.controller('FooterCtrl', function($scope) {var vm = 这个；vm.message = 'vm 页脚';window.console.log('Footer scope id:' + $scope.$id);window.console.log('Footer parent scope id:' + $scope.$parent.$id);window.console.log('页脚祖父作用域 id:' + $scope.$parent.$parent.$id);window.console.log('页脚祖父作用域名称:' + $scope.$parent.$parent.mainMessage);window.console.log('Footer 祖父作用域条件:' + $scope.$parent.$parent.shouldDisplaySomthingInFooter);vm.showSomthing = 假；//如何从父作用域中提取以将 ng-show 绑定到 ng-include 中父级中设置的值?});我在这里有这个例子:
HTML:
<p>来自主控制器'{{vm.mainMessage}}'的消息</p><div ng-include="'commonFooter.html'"></div>CommonFooter.html:
app.js:
var app = angular.module('plunker', []);app.controller('MainCtrl', function() {var self = this;self.mainMessage = '你好世界';self.shouldDisplaySomethingInFooter = true;});app.controller('FooterCtrl', function() {var self = this;self.message = '虚拟机页脚';});
注意:为了清晰起见并减少视图和控制器之间的混淆，我将您的 var vm = this 重命名为 var self = this.
预期输出:
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.
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
<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>
I want each views controller to determine the state of the footer and whether specific content is hidden or not. (shouldDisplaySomthingInFooter below)
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.mainMessage= 'HEELO';
vm.shouldDisplaySomthingInFooter = true;
window.console.log('Main scope id: ' + $scope.$id);
});
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?
});
I have this example here:
http://plnkr.co/edit/ucI5Cu4jjPgZNUitY2w0?p=preview
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.
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.
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.
解决方案 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';
});
Note: I renamed your var vm = this to var self = this for clarity and to reduce confusion between your views and your controllers.
Expected output:
这篇关于AngularJS:ng-include 和 ng-controller的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
