javascript 动态 ng-include 头痛
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24148019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Headache with dynamic ng-include
提问by sir_thursday
I know that ng-viewis better for this type of problem, but I'm already using it to dynamically load an authvs. dashboardtemplate, so I'm stuck using ng-includes.
我知道这ng-view对这类问题更好，但我已经在使用它来动态加载authvs.dashboard模板，所以我坚持使用ng-includes.
Basically, once I load the dashboardtemplate with ng-view, I have a tab control that should change the ng-includedepending on which tab is active. However, I can not for my life figure out how to change the ng-include depending on which tab is selected. As an FYI, super new to Angular, mostly a JQuery guy, (and yes, I know I should avoid using JQuery w/ Angular so that I can master Angular, but I'm at my wits end with this thing).
基本上，一旦我用 加载dashboard模板ng-view，我就有了一个选项卡控件，它应该ng-include根据哪个选项卡处于活动状态而改变。但是，我终生无法弄清楚如何根据选择的选项卡更改 ng-include。作为一个仅供参考，Angular 的超级新手，主要是一个 JQuery 人，（是的，我知道我应该避免使用带有 Angular 的 JQuery，这样我才能掌握 Angular，但我对这件事束手无策）。
Here's my tab control:
这是我的选项卡控件：
myApp.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
url: '#/dashboard/one'
}, {
url: '#/dashboard/two'
}
}];
$scope.activeTab = '#/dashboard/one';
$scope.onClickTab = function(tab) {
$scope.activeTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.activeTab;
}
$scope.dashboard.url = {};
if($scope.activeTab === '#/dashboard/one') {
$('ng-include').attr('src', 'dashboard/one.html');
}
if($scope.activeTab === '#/dashboard/two') {
$('ng-include').attr('src', 'dashboard/two.html');
}
}]);
And here's the html:
这是 html：
<div id="wrapper" ng-controller="TabsCtrl">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li ng-repeat="tab in tabs"
ng-class="{active_tab:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">
<a href="{{tab.url}}">
<div class="tab-icon">
<i ng-class="tab.icon"></i>
</div>
<div class="tab-label">{{tab.label}}</div>
</a>
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="page-content">
<ng-include src=""></ng-include>
</div>
</div>
</div>
@hasH: I tried to do something along these lines, but $scope.dashboardPath.urldidn't seem to be the actual src="dashboardPath.url".
@hasH：我试图按照这些思路做一些事情，但$scope.dashboardPath.url似乎并不是真正的src="dashboardPath.url".
var path = currentPath;//Retrieve it.
$scope.dashboardPath={};
if(path==='/dashboard/one')
$scope.dashboardPath.url='pageOne.html';
if(path==='/dashboard/two')
$scope.dashboardPath.url='pageTwo.html';
回答by pixelbits
Bind the src attribute of the ng-include directive with an angular expression that evalutes to activeTab.url. activeTabis a model on the scope, and srcwill be bound to the urlproperty of the model:
将 ng-include 指令的 src 属性与计算结果为 的角度表达式绑定activeTab.url。 activeTab是作用域上的模型，并将src绑定到url模型的属性：
<div id="page-content-wrapper">
<div class="page-content">
<ng-include src="activeTab.url"></ng-include>
</div>
</div>
In your controller, make sure you assign activeTabto your scope:
在您的控制器中，确保您分配activeTab给您的范围：
myApp.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
url: '#/dashboard/one'
}, {
url: '#/dashboard/two'
}
}];
$scope.activeTab = $scope.tabs[0];
$scope.onClickTab = function(tab) {
$scope.activeTab = tab;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.activeTab.url;
}
}]);
There is no need to manipulate the DOM with ng-include (it would be incorrect to do so). When 'activeTab' changes, it will automatically update ng-include because there is a binding set up between the $scope model (activeTab) and the ng-include directive.
不需要使用 ng-include 操作 DOM（这样做是不正确的）。当 'activeTab' 改变时，它会自动更新 ng-include，因为 $scope 模型（activeTab）和 ng-include 指令之间有一个绑定设置。
回答by PandAngular
As the source to the ng-include you need to bind a variable from the scope.
作为 ng-include 的源，您需要从作用域绑定一个变量。
myApp.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
url: '#/dashboard/one'
}, {
url: '#/dashboard/two'
}
}];
$scope.activeTab = '#/dashboard/one';
$scope.onClickTab = function(tab) {
$scope.activeTab = tab.url;
$acope.pageSource = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.activeTab;
}
$scope.dashboard.url = {};
if($scope.activeTab === '#/dashboard/one') {
$scope.pageSource = 'dashboard/one.html';
}
if($scope.activeTab === '#/dashboard/two') {
$scope.pageSource = 'dashboard/two.html';
}
}]);
<div id="wrapper" ng-controller="TabsCtrl">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li ng-repeat="tab in tabs"
ng-class="{active_tab:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">
<a href="{{tab.url}}">
<div class="tab-icon">
<i ng-class="tab.icon"></i>
</div>
<div class="tab-label">{{tab.label}}</div>
</a>
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="page-content">
<ng-include src="pageSource"></ng-include>
</div>
</div>
</div>
回答by Paras
First of all, been there. Here is what I had done.
首先，去过那里。这是我所做的。
var controller = function($scope, $location)
{
$scope.dashboard.url = {};
$scope.init = function(){
var currentLink = $location.url();
if(currentLink === '#/dashboard/one') {
$scope.dashboard.url = 'dashboard/one.html';
}
if(currentLink === '#/dashboard/two') {
$scope.dashboard.url = 'dashboard/two.html';
}
};
$scope.init();
};
[EDIT] Maybe this could work also.
[编辑] 也许这也可以。
var controller = function($scope, $location)
{
$scope.tabs = [{url: '#/dashboard/one'},
{url: '#/dashboard/two'}
];
$scope.dashboard={};
$scope.dashboard={url:$scope.tabs[0].url};
$scope.init = function(){
var currentLink = $location.url();
if(currentLink === '#/dashboard/one') {
$scope.dashboard = $scope.tabs[0];
}
if(currentLink === '#/dashboard/two') {
$scope.dashboard.url = $scope.tabs[0];
}
};
$scope.init();
};
