動態ng-include的頭痛

Question

我知道ng-view對於這類問題更好，但我已經用它來動態加載auth vs. dashboard模板，所以我堅持使用ng-includes 。

基本上，一旦我使用ng-view加載dashboard模板，我就有一個選項卡控件，應根據哪個選項卡處於活動狀態來更改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屬性與activeTab.url到activeTab.url的角度表達式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指令之間存在綁定。

Answer 2

作為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>

Answer 3

首先，去過那里。 這就是我所做的。

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();
};

[編輯]也許這也可以。

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();
};