Maux de tête avec la dynamique ng-inclure

Je sais que ng-view est le mieux pour ce type de problème, mais je suis déjà en train de l'utiliser pour charger dynamiquement un auth vs dashboard modèle, donc je suis coincé à l'aide de ng-includes.

Fondamentalement, une fois que je charge la dashboard modèle avec ng-view, j'ai un onglet de contrôle qui devrait changer les ng-include selon l'onglet est actif. Cependant, je ne peux pas pour ma vie, figure comment changer la ng-inclure selon l'onglet sélectionné. Comme pour info, super nouvelle Angulaire, la plupart du temps JQuery gars, (et oui, je sais que je devrais éviter d'utiliser JQuery w/Angulaire afin que je puisse maître Angulaire, mais je suis à bout de ressources avec cette chose).

Voici mon onglet de contrôle:

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

Et voici le code 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: j'ai essayé de faire quelque chose le long de ces lignes, mais $scope.dashboardPath.url ne semble pas être le réel 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';
  • Donc, vous n'êtes pas en mesure de s'initialiser correctement je suppose ?
  • Hahaha, ouais... en cours d'exécution dans les questions. Bienvenue à aider l'angle de débutant. Je ne pouvais pas l'initialiser correctement, je pense que parce que ng-include crée un nouveau champ d'application, de sorte que je ne pouvais pas comprendre où le code d'initialisation de il devrait aller. J'ai essayé de le mettre dans la TabCtrl, mais ne pouvait pas trouver comment accéder à la src attribut.
  • Permettez-moi d'essayer de nouveau. Pour ce qui est de résoudre les problèmes. C'est ce qui est DONC pour.
InformationsquelleAutor sir_thursday | 2014-06-10
  1. 10

    Lier l'attribut src de la ng-directive include avec un angulaire, expression qui evalutes à activeTab.url. activeTab est un modèle sur le champ, et src sera lié à la url propriété du modèle:

    <div id="page-content-wrapper">
  <div class="page-content">
    <ng-include src="activeTab.url"></ng-include>
  </div>
</div>

    Dans votre contrôleur, assurez-vous d'attribuer activeTab à votre portée:

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

}]);

    Il n'est pas nécessaire de manipuler le DOM avec ng-inclure (il serait incorrect de le faire). Lorsque 'activeTab' des modifications, il sera automatiquement mise à jour gn-inclure parce qu'il n'y est une liaison établie entre le $champ d'application de modèle (activeTab) et le ng-directive include.

    • Qu'entendez-vous par "lier votre ng-inclure avec un modèle"?
    • La ng-directive include a un attribut src. L'attribut src peut être définie à une angulaire, expression qui correspond à une URL. En spécifiant " activeTab.url " vous êtes de liaison de l'URL d'un modèle (activeTab), et une propriété sur ce modèle (activeTab.l'url).
    • j'ai aussi eu ce travail, mais de mon point de vue ne semble pas être connecté à son contrôleur correctement. Je peux voir les événements de contrôleur de tir, mais ce n'est pas vraiment connecté à la vue!
    InformationsquelleAutor pixelbits
  2. 2

    Comme la source de la ng-vous besoin de lier une variable à partir de la portée.

    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>
    InformationsquelleAutor PandAngular
  3. 1

    Tout d'abord, été il.
    Voici ce que j'avais fait.

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

    [MODIFIER]
    Peut-être que cela pourrait fonctionner aussi.

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