动态 ng-include 带来的头痛答案

【问题标题】：Headache with dynamic ng-include动态 ng-include 带来的头痛
【发布时间】：2014-07-31 15:08:25
【问题描述】：

我知道ng-view 更适合这种类型的问题，但我已经使用它来动态加载auth 与dashboard 模板，所以我无法使用ng-includes。

基本上，一旦我用ng-view 加载dashboard 模板，我就有一个选项卡控件，它应该根据哪个选项卡处于活动状态来更改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';

【问题讨论】：

那么，我想你无法正确初始化？
哈哈哈，是的……遇到问题了。欢迎回来帮助 Angular 新手。我无法正确初始化它，我认为是因为ng-include 创建了一个新范围，所以我无法弄清楚初始化它的代码应该去哪里。我尝试将其放入TabCtrl，但无法弄清楚如何访问src 属性。
让我再试一次。至于解决问题。这就是 SO 的用途。

标签： javascript jquery angularjs angularjs-ng-include

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

【讨论】：

“将 ng-include 与模型绑定”是什么意思？
ng-include 指令有一个 src 属性。 src 属性可以设置为计算为 URL 的角度表达式。通过指定“activeTab.url”，您将 URL 绑定到模型 (activeTab) 以及该模型上的属性 (activeTab.url)。
我也让它工作，但我的视图似乎没有正确连接到它的控制器。我可以看到控制器事件触发，但它并没有真正连接到视图！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：