Javascript 头痛伴动力性头痛包括

我知道

ng view

更适合这种类型的问题，但我已经在使用它动态加载

auth

vs.

dashboard

模板，所以我一直在使用

ng includes

基本上，一旦我用

ng视图

加载

仪表板

模板，我就有了一个选项卡控件，它应该根据哪个选项卡处于活动状态来更改

ng include

。但是，我一生都不知道如何根据选择的选项卡更改ng include。仅供参考，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');
  }
  }]);

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

下面是html:

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

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

---

用一个角度表达式绑定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>

不需要使用ng include操作DOM（这样做是不正确的）。当“activeTab”更改时，它将自动更新ng include，因为$scope模型（activeTab）和ng include指令之间存在绑定设置

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

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 path = currentPath;//Retrieve it.
$scope.dashboardPath={};
if(path==='/dashboard/one')
    $scope.dashboardPath.url='pageOne.html';
if(path==='/dashboard/two')
    $scope.dashboardPath.url='pageTwo.html';

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的源，您需要从作用域绑定一个变量

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>

myApp.controller（'TabsCtrl'，['$scope'，函数（$scope）{
$scope.tabs=[{
url:“#/dashboard/one”
}, {
url:“#/dashboard/two”
}
}];
$scope.activeTab='#/dashboard/one'；
$scope.onClickTab=函数（选项卡）{
$scope.activeTab=tab.url；
$acope.pageSource=tab.url；
}
$scope.isActiveTab=函数（tabUrl）{
return tabUrl==$scope.activeTab；
}
$scope.dashboard.url={}；
如果（$scope.activeTab=='#/dashboard/one'）{
$scope.pageSource='dashboard/one.html'；
}
如果（$scope.activeTab=='#/dashboard/two'）{
$scope.pageSource='dashboard/two.html'；
}
}]);

所以，我想你无法正确初始化？哈哈哈，是的。。。遇到问题。欢迎回到帮助消瘦的新手。我无法正确初始化它，我想是因为

nginclude

创建了一个新的作用域，所以我无法确定初始化它的代码应该放在哪里。我尝试将其放入

选项卡Ctrl

，但无法确定如何访问

src

属性。让我再试一次。至于解决问题。这就是为什么。您所说的“用模型绑定您的ng include”是什么意思？ng include指令有一个src属性。src属性可以设置为计算结果为URL的角度表达式。通过指定'activeTab.url'，您将url绑定到一个模型（activeTab）和该模型上的一个属性（activeTab.url）。我也做到了这一点，但我的视图似乎没有正确连接到它的控制器。我可以看到控制器事件触发，但它并没有真正连接到视图！