AngularUI引導旋轉木馬無法正常工作時，結合HTML內容$編譯

AngularUI引導版本2.4.22^

AngularJS版本1.6.4

角消毒版本1.6.1^

我無法使用AngularUI Bootstrap的Carousel插件。在我的場景中，我需要讀取包含一些模板路徑的外部文件，並將它們作爲幻燈片加載。見下面的例子：

的index.html（指令被稱爲地方）

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

橫幅rotativo.directive.js - 基本上，在這個指令，我有以下結構的模板的AngularUI Bootstrap's demo，並且我將響應數據綁定到$scope.slides數組。當我推入htmlContent屬性$compile(objResponseInner)($scope)的結果時，輪播行爲可以正常工作，但它將[[object HTMLDivElement]]和類似事件呈現爲一個項目。

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


}]);

橫幅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" 
    } 
    } 
}

加載模板例如：

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

一些要點：

我使用$compile，因爲我的注入模板也有控制器。如果我不使用它，我的控制器不會被處理。當我簡單地插入沒有$compile的HTML時，它呈現正常。

怎麼了？

來源

2017-06-28 Victor Alencar Santos

問題是，ng-bind-html期望html字符串，你給它的結果來自$compile這實際上是一個元素對象。你可能採取編譯元素的HTML字符串，並通過它，但你可能會遇到所有類型的麻煩。

但是您實際上可以使用ngInclude而不是ng-bind-html跳過$compile的麻煩。它將爲您處理模板請求和編譯。

因此，而不是請求和編譯strTemplatePath，存儲到幻燈片列表：

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

，然後使用該模板：

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

這裏是一個有點工作小提琴：jsfiddle.net，雖然我不得不在這裏和那裏填寫幾個空格。

來源

2017-07-04 19:08:54 noppa

該死的傢伙，你是一個傳奇！我是Angular的新手，爲了解決這個問題，我在牆上猛擊了3天。謝謝！！！ –

哈，謝謝:)很高興我能幫上忙。 – noppa

AngularUI引導旋轉木馬無法正常工作時，結合HTML內容$編譯

回答

相關問題