动态ng-include的头痛

Question

我知道ng-view这种类型的问题更好,但我已经用它来动态加载一个authvs. dashboard模板,所以我一直在使用ng-includes.

基本上,一旦我加载dashboard模板ng-view,我有一个选项卡控件,应该更改ng-include取决于哪个选项卡是活动的.但是,我不能为我的生活弄清楚如何根据选择的选项卡更改ng-include.作为一个FYI,Angular的新手,主要是一个JQuery人,(是的,我知道我应该避免使用JQuery w/Angular,以便我可以掌握Angular,但我的智慧结束了这件事).

这是我的标签控件:

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');
  }
  }]);

这是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:我试图沿着这些方向做点什么,但$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';

Answer 1

将ng-include指令的src属性与evalutes to的角度表达式绑定activeTab.url. activeTab是范围的模型,并将src绑定到url模型的属性:

<div id="page-content-wrapper">
  <div class="page-content">
    <ng-include src="activeTab.url"></ng-include>
  </div>
</div>

在控制器中,确保分配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;
   }

}]);

没有必要使用ng-include操作DOM(这样做是不正确的).当'activeTab'发生变化时,它将自动更新ng-include,因为$ scope模型(activeTab)和ng-include指令之间存在绑定.