2

我知道这ng-view对于这类问题更好，但我已经在使用它来动态加载authvs.dashboard模板，所以我坚持使用ng-includes.

基本上，一旦我用 加载dashboard模板ng-view，我就有一个选项卡控件，它应该ng-include根据哪个选项卡处于活动状态而改变。但是，我一生无法弄清楚如何根据选择的选项卡更改 ng-include。作为一个仅供参考，Angular 的超级新手，主要是一个 JQuery 人，（是的，我知道我应该避免使用带有 Angular 的 JQuery，以便我可以掌握 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';
4

3 回答 3

10

将 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（这样做是不正确的）。当 'activeTab' 改变时，它会自动更新 ng-include，因为在 $scope 模型（activeTab）和 ng-include 指令之间建立了绑定。

于 2014-06-10T18:23:33.207 回答
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>
于 2014-06-10T18:25:25.320 回答
1

首先，去过那里。这是我所做的。

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();
};
于 2014-06-10T18:24:51.837 回答