Question

我知道ng-view更适合此类问题，但我已经使用它来动态加载auth与dashboard模板，所以我＆＃39 ;我坚持使用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属性与一个评估为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（这样做是不正确的）。当＆＃39; activeTab＆＃39;更改，它将自动更新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();
};

动态ng-include的头痛

3 个答案: