2017-09-15 8 views
0

をレンダリングしない:すべての接続されている正しいクラスangularjsアコーディオンに接続しないと、HTMLは、私のようなものを実装しようとしている正しく

http://embed.plnkr.co/3y0Rq1/

配管を、グループの出力を取得している、そして各グループが取得していますクラスng-scopeが、私のHTMLはクラスaccordion-groupを得ていません。代わりにng-bindingが得られます。また、私のHTMLは<div>の代わりに<accordion-group><accordion-heading>と表示されています。私はそれが重要だと思うが、なぜそれが起こっているのかわからない。アコーディオンを追加しようとしているアプリケーションは、既に提供されているリンクの例よりも新しいバージョンではあるが、正しいファイル参照を既に持っているようだ。最終的にレンダリングされるHTMLは単なるテキストにすぎません。それは正しくフォーマットされておらず、アコーディオンのように伸縮しません。ここに私のコードです。 Index.cshtmlで

参考文献(アプリはASP.NET MVCから起動されている):

maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 
~/Content/dist/css/app.css 
code.jquery.com/jquery-2.2.4.min.js 
maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js 
ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js 
ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js 
ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-cookies.min.js 
cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.7/angular-sanitize.min.js 
Scripts/angular-sortable-view.js 
~/Scripts/angular-auto-focus.js 
Scripts/ui-bootstrap-custom-tpls-2.0.1.min.js 
~/Content/dist/js/app.min.js 
~/Scripts/angular-img-http-src.js 

Accordion.js

(function (angular) { 
    angular.module("profilebuilder") 
     .controller("Accordion", 
      [ 
       "$scope", function($scope) { 
        $scope.groups = [ 
         { 
          title: "Dynamic Group Header - 1", 
          content: "Dynamic Group Body - 1", 
          open: false 
         }, 
         { 
          title: "Dynamic Group Header - 2", 
          content: "Dynamic Group Body - 2", 
          open: false 
         } 
        ]; 
       } 
      ]); 
}(angular)); 

HTML:

<div class="SearchCriteria" ng-controller="Accordion"> 
    <accordion> 
     <accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open"> 
      <accordion-heading> 
       {{group.title}} 
      </accordion-heading> 
      {{group.content}} 
     </accordion-group>  
    </accordion> 
</div> 

正しいHTML :

Correct accordion HTML

不正なHTML:

Incorrect accordion HTML

答えて

0

問題は、あなたがui.bootstrapの

を使用しているバージョンであるこのHTMLはここ

<uib-accordion close-others="oneAtATime"> 
    <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> 
     {{group.content}} 
    </div> 
    </uib-accordion> 

に動作しますへのリンクですa plknr witの例

関連する問題