AngularUI Bootstrap Karussell nicht richtig funktioniert, wenn die Bindung von HTML-Inhalten mit $

kompilieren

AngularUI Bootstrap-Version^2.4.22

AngularJS Version 1.6.4

Angular Sanitize Version^1.6.1

Ich habe Probleme mit AngularUI Bootstrap's Carousel-Plugin. In meinem Szenario muss ich eine externe Datei lesen, die einige Vorlagenpfade enthält, und jede davon als Folie laden. Siehe Beispiel unten:

index.html (wo Richtlinie genannt wird)

 <body id="body" ng-app="homePage"> 
     <div id="miolo"> 
      <div example-directive class="ng-hide"></div> 
      <div banner-rotativo></div> 
      <div id="menu-footer"></div> 
     </div> 
    </body>

Banner-rotativo.directive.js - Grundsätzlich ist in dieser Richtlinie habe ich eine Vorlage nach der Struktur von AngularUI Bootstrap's demo, und ich binde die Antwortdaten an $scope.slides Array. Wenn ich in die htmlContent Eigenschaft das $compile(objResponseInner)($scope) Ergebnis eindringe, funktioniert das Karussellverhalten okay, aber es stellt [[object HTMLDivElement]] und solche Sachen als ein Einzelteil dar.

angular.module('homePage') 
.directive('bannerRotativo', ['$compile', '$http', 'moduleUrl', '$templateRequest', function ($compile, $http, moduleUrl, $templateRequest) { 
    return { 
     template: '<div style="height: 305px" ng-controller="bannerHomeController" class="" >\ 
         <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">\ 
          <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">\ 
           <div ng-bind-html="slide.htmlContent">\ 
           </div>\ 
          </div>\ 
         </div>\ 
        </div>', 

     link: function (scope, element, attributes, controller) { 

      //Carousel 
      scope.myInterval = 5000; 
      scope.noWrapSlides = false; 
      scope.active = 0; 
      scope.slides = []; 
      var intCurrentIndex = 0; 

      $http({ 
       method: 'GET', 
       url: moduleUrl.getUrl('homepage', '../config/banner-rotativo.conf') 
      }).then(function success(objResponse, status, headers, config) { 
       var objData = objResponse.data; 
       if (objData.slides) { 
        angular.forEach(objData.slides, function (objItem, strObjectName) { 
         var strTemplatePath = moduleUrl.getUrl('homepage', '..' + objItem.caminho); 
         if (strTemplatePath) { 
          $templateRequest(strTemplatePath).then(function success(objResponseInner) { 
           var objContent = $compile(objResponseInner)(scope); 
           scope.slides.push({ 
            htmlContent: objContent, 
            id: intCurrentIndex++ 
           }); 
          }); 
         } 
        }); 
       } 
      }); 
     } 
    } 


}]);

Banner-rotativo.conf

{ 
"slides": { 
    "banner-ex-one": { 
     "titulo": "exone", 
     "caminho-imagem": "assets/one.jpg", 
     "caminho": "/html/components/banner-rotativo/banner-ex-one.view.html" 
    }, 
    "banner-ex-two" : { 
     "titulo": "extwo", 
     "caminho-imagem": "assets/two.jpg", 
     "caminho": "/html/components/banner-rotativo/banner-ex-two.view.html" 
    }, 
    "banner-rav" : { 
     "title": "rav", 
     "caminho-imagem": "assets/rav.jpg", 
     "caminho": "/html/components/banner-rotativo/banner-rav.view.html" 
    }, 
    "banner-aviso" : { 
     "title": "Quadro de comunicações 1", 
     "caminho-imagem": "assets/aviso.jpg", 
     "caminho": "/html/components/banner-rotativo/banner-aviso.view.html" 
    }, 
    "banner-custom" : { 
     "title": "Quadro de comunicações 2", 
     "caminho-imagem": "assets/custom.jpg", 
     "caminho": "/html/components/banner-rotativo/banner-custom.view.html" 
    } 
    } 
}

Loaded Vorlage Beispiel:

<div id="frameOne" ng-controller="slideOneController" class="varejo-clique-promocao-one" title="Conteúdo Varejo - Quadro One"> 
<div class="item"> 
    <div id="dados"> 

     <!-- Imagem banner one --> 
     <img id="one" ng-click="enviarFormOne()" class="one" alt="" ng-if="1==1" ng-src="caminhoImagem" 
     /> 
     <!-- End imagem banner --> 
     <span ng-if="hasText">{{bannerText}}</span> 
    </div> 
    <div id="excecao" class="excecao" ng-if="typeof(one.excecao) !== 'undefined'"> 
     DEU EXCECAO 
    </div> 
    <div class="carousel-title" id="tituloOne" ng-if="1==1" title="{{bannerTitle}}"> 
     {{bannerTitle}} 
    </div> 
</div>

Einige wichtige Punkte:

ich $compile bin mit, weil meine injizierten Vorlagen-Controller zu haben. Wenn ich es nicht verwende, werden meine Controller nicht verarbeitet. Wenn ich einfach das HTML ohne $compile einfüge, rendert es in Ordnung.

Was ist los?

Quelle

2017-06-28 Victor Alencar Santos

Das Problem ist, dass ng-bind-html HTML-String erwartet und Sie geben es das Ergebnis von $compile, die eigentlich ein Element-Objekt ist. Sie könnte nehmen Sie die HTML-Zeichenfolge aus dem kompilierten Element und übergeben Sie stattdessen, aber Sie würden wahrscheinlich in alle Arten von Ärger damit geraten.

Aber Sie können den Ärger einfach mit $compile überspringen, indem Sie ngInclude anstelle von ng-bind-html verwenden. Es wird sowohl die Vorlage Anfrage und die Zusammenstellung für Sie behandeln.

Anstatt also Anfordern und strTemplatePath kompilieren, speichern, dass die Liste der Folie:

var strTemplatePath = moduleUrl.getUrl('homepage', '..' + objItem.caminho); 
if (strTemplatePath) { 
    scope.slides.push({ 
     htmlUrl: strTemplatePath, 
     id: intCurrentIndex++ 
    }); 
}

Und dann, dass in der Vorlage verwenden:

<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"> 
    <div ng-include="slide.htmlUrl"></div> 
</div>

Hier ist eine etwas Arbeits Geige: jsfiddle.net, obwohl Ich musste hier und da ein paar Felder ausfüllen.

Quelle

2017-07-04 19:08:54 noppa

Verdammt, du bist eine Legende! Ich bin neu bei Angular und schlug 3 Tage lang meinen Kopf an die Wand, um das Problem zu lösen. Vielen Dank!!! –

Hah, danke :) Ich bin froh, dass ich helfen konnte. – noppa

AngularUI Bootstrap Karussell nicht richtig funktioniert, wenn die Bindung von HTML-Inhalten mit $

Antwort

Verwandte Themen