Contenu dynamique dans la Dynamique de l'Onglet (Angulaire, UI Bootstrap)

Je voudrais utiliser ng-à inclure dans le contenu généré dynamiquement, un onglet en utilisant AngularJs et UI Bootstrap.

J'ai un Plunker ici:
http://plnkr.co/edit/2mpbovsu2eDrUdu8t7SM?p=preview

<div id="mainCntr" style="padding: 20px;">
  <uib-tabset>
    <uib-tab ng-repeat="tab in tabs" active="tab.active" disable="tab.disabled">
      <uib-tab-heading>
        {{tab.title}} <i class="glyphicon glyphicon-remove-sign" ng-click="removeTab($index)"></i>
      </uib-tab-heading>
      {{tab.content}}
    </uib-tab>
  </uib-tabset>
</div>

Code JS:

$scope.addTab = function() {
    var len = $scope.tabs.length + 1;
    var numLbl = '' + ((len > 9) ? '' : '0') + String(len);

    var mrkUp = '<div>' +
        '<h1>New Tab ' + numLbl + ' {{foo}}</h1>' + 
        '<div ng-include="tab.tabUrl" class="ng-scope"></div>' +
        '</div>';

    $scope.tabs.push({title: 'Tab ' + numLbl, content: $compile(angular.element(mrkUp))($scope)});
}

Dans le Plunker, cliquez sur le "Ajouter un Onglet" bouton. Il appelle une fonction dans $portée qui pousse un nouvel onglet pour la collection, mais en passant dans certains contenu généré dynamiquement, qui comprend une ng-directive include. Le résultat attendu est que le ng-include seront affichés à l'intérieur de l'onglet zone de contenu.

Grâce

Votre plunk ne fonctionne pas correctement, je pense?
Je ne pouvais pas le faire fonctionner. Le plunk est juste une tentative de ma part, en espérant que quelqu'un ici peut m'aider à le faire fonctionner.
...oh, maintenant ça fonctionne. Quand je l'ai regardé plus tôt, il a été brisé. Prenons un coup d'oeil à nouveau.
Maintenant que j'y pense, tu fais $compiler avant de pousser la languette. Envisager de mettre une montre sur votre $champ d'application.onglets qui vous permettent d'exécuter $compiler une fois que vous avez poussé sur elle.

InformationsquelleAutor vdiaz1130 | 2015-11-13

Dans votre Plunker vous utilisez ng-bind-html ce qui ne veut pas compiler le code HTML pour vous. Vous pouvez créer une nouvelle directive qui le fait pour vous.

Code Source pour ng-bind-html:

var ngBindHtmlDirective = ['$sce', '$parse', '$compile', function($sce, $parse, $compile) {
  return {
    restrict: 'A',
    compile: function ngBindHtmlCompile(tElement, tAttrs) {
      var ngBindHtmlGetter = $parse(tAttrs.ngBindHtml);
      var ngBindHtmlWatch = $parse(tAttrs.ngBindHtml, function getStringValue(value) {
        return (value || '').toString();
      });
      $compile.$$addBindingClass(tElement);

      return function ngBindHtmlLink(scope, element, attr) {
        $compile.$$addBindingInfo(element, attr.ngBindHtml);

        scope.$watch(ngBindHtmlWatch, function ngBindHtmlWatchAction() {
          //we re-evaluate the expr because we want a TrustedValueHolderType
          //for $sce, not a string
          element.html($sce.getTrustedHtml(ngBindHtmlGetter(scope)) || '');
        });
      };
    }
  };
}];

Choisir un nom pour la nouvelle directive, par exemple compile-html.

Remplacer tAttrs.ngBindHtml avec tAttrs.compileHtml (ou tout autre nom que vous avez choisi).

Vous avez besoin de remplacer $sce.getTrustedHtml avec $sce.trustAsHtml, ou vous obtiendrez Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

Alors vous devez faire appel $compile:

$compile(element.contents())(scope);

Complète de la directive:

app.directive('compileHtml', ['$sce', '$parse', '$compile',
  function($sce, $parse, $compile) {
    return {
      restrict: 'A',
      compile: function ngBindHtmlCompile(tElement, tAttrs) {
        var ngBindHtmlGetter = $parse(tAttrs.compileHtml);
        var ngBindHtmlWatch = $parse(tAttrs.compileHtml, function getStringValue(value) {
          return (value || '').toString();
        });
        $compile.$$addBindingClass(tElement);

        return function ngBindHtmlLink(scope, element, attr) {
          $compile.$$addBindingInfo(element, attr.compileHtml);

          scope.$watch(ngBindHtmlWatch, function ngBindHtmlWatchAction() {

            element.html($sce.trustAsHtml(ngBindHtmlGetter(scope)) || '');
            $compile(element.contents())(scope);
          });
        };
      }
    };
  }
]);

Utilisation:

<div compile-html="tab.content"></div>

Démo: http://plnkr.co/edit/TRYAaxeEPMTAay6rqEXp?p=preview

InformationsquelleAutor tasseKATT

Ma situation pourrait ne pas être aussi complexe, de sorte que cette solution simple œuvres:

sdo.tabs:{
data:[],
active:0,
reset: function(){
var tabs = this.data;
while( tabs.length > 0 ) {
this.removeTab( tabs[tabs.length-1].child.name);
}
this.active = 0;
},
childExists: function( childName ) {
var fromTheTop = this.data.length,
parentName = ( this.active > 0 ? this.data[ this.active - 1 ].child.name : 'zero' );
while( fromTheTop > this.active ) {
var child = this.data[ fromTheTop-1 ].child;
if( child && child.parent === parentName && child.name === childName ) return fromTheTop;
fromTheTop--;
}
return false;
},
removeTab: function( name ) { //will remove any descendents of this tab as well, see recursive call near end
var fromTheTop = this.data.length;
while( fromTheTop > 0 ) {
var tab = this.data[fromTheTop - 1];
if( tab.child.name === name ) {
angular.element( '#'+name ).empty();
this.data.splice( fromTheTop - 1);
return;
}
if( tab.child.parent === name) this.removeTab( tab.child.name );
fromTheTop--;
};
},
/*
* tab is string identifies tab but doesn't show in the UI
* tempmlate is HTML template
* scope is used to compile template
* title is string or function for UI tab title, appears in the tab row
*/
create: function( tab, template, scope, title ) {
var childName = tab;
var tabs = this.data;
tab = this.childExists( childName );
if( tab === false ) {
tab = tabs.length + 1;
} else { //recycling a tab, kill it & its descendents
this.removeTab( childName );
}
tabs[tab-1] = {
title:function(){
if( angular.isFunction(title) ) return title();
return title;
},
child: {
parent:( this.active > 0 ? this.data[ this.active - 1 ].child.name : 'zero' ), 
name:childName
}                    
};
var ct = $timeout( function() {
angular.element( '#'+tabs[tab-1].child.name ).html( $compile( template )( scope ) );
sdo.tabs.active = tab;
return; //return nothing to avoid memory leak
});
scope.$on('$destroy', function() {
$timeout.cancel( ct );
});
return ct; //ct is a promise
}
}

HTML est

HTML:

<uib-tabset active="tabs.active">
<uib-tab index='0' heading="{{title}}">
<ng-view></ng-view>
</uib-tab>
<uib-tab ng-repeat="tab in tabs.data track by tab.child.name" heading="{{tab.title()}}" index='$index+1' >
<div id="{{tab.child.name}}"></div>
</uib-tab>
</uib-tabset>

Dans mon cas, le premier onglet est peuplée par l'angle de routeur, c'est pourquoi l'onglet tableau est un indice de tabs.active

InformationsquelleAutor Nik Dow

Vous devez vous connecter pour publier un commentaire.