앵글 아코디언이 html을 수정하지 못함

앵글 아코디언을 ng-repeat와 함께 사용하고 싶습니다. html이 내 페이지에서 제대로 해결되지 않고 아코디언이 전혀 작동하지 않는 이상한 행동에 직면하고 있습니다. 그러나 똑같은 코드는 plunkr의 매력처럼 작동합니다.앵글 아코디언이 html을 수정하지 못함

이 plunkr를 참조하십시오 : http://embed.plnkr.co/3Z450PxtGynDaTLh5zwl/

나는 위의 plunkr에 요소를 검사 할 경우에, 나는 얻을이

<div ng-controller="AccordionDemoCtrl" class="ng-scope"> 
 
    <accordion> 
 
     <div class="accordion" ng-transclude=""> 
 
     <!-- ngRepeat: group in groups --> 
 
     <div class="accordion-group ng-scope" heading="Title 1" ng-repeat="group in groups"> 
 
      <div class="accordion-heading"><a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">Title 1</a></div> 
 
      <div class="accordion-body collapse" collapse="!isOpen" style="height: auto;"> 
 
       <div class="accordion-inner" ng-transclude=""> 
 
        <ul class="ng-scope"> 
 
        <!-- ngRepeat: item in group.items --> 
 
        <li ng-repeat="item in group.items" class="ng-scope ng-binding">item 1</li> 
 
        <li ng-repeat="item in group.items" class="ng-scope ng-binding">item 2</li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="accordion-group ng-scope" heading="Title 2" ng-repeat="group in groups"> 
 
      <div class="accordion-heading"><a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">Title 2</a></div> 
 
      <div class="accordion-body collapse" collapse="!isOpen" style="height: 0px;"> 
 
       <div class="accordion-inner" ng-transclude=""> 
 
        <ul class="ng-scope"> 
 
        <!-- ngRepeat: item in group.items --> 
 
        <li ng-repeat="item in group.items" class="ng-scope ng-binding">item 3</li> 
 
        <li ng-repeat="item in group.items" class="ng-scope ng-binding">item 4</li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </accordion> 
 
</div>

그러나 같은 HTML 본문 나는 정확한을 실행할 때 내 웹 페이지에서 같은 코드를 사용하면 다음과 같은 HTML을 얻을 수 있습니다.

당신이 자세히 알 경우3210

는 작업 복사본은 HTML과 CSS 클래스를 해결하려면 제대로에서 아코디언을 해결하지만 내 페이지의 하나 제대로 해결되지 않습니다. 나는 무슨 일이 일어나고 있는지 알기 위해 미쳐 가고 정말로 실마리가 없습니다.

나는 비교를 위해 온라인 차이점을 만들었습니다 https://www.diffchecker.com/rG70Forz

내 bower.json

"dependencies": { 
"angular": "^1.5.5", 
"bootstrap": "3.3.4", 
"angular-route": "^1.5.5", 
"angular-touch": "^1.5.5", 
"angular-animate": "^1.5.5", 
"typed.js": "^1.1.1", 
"underscore": "^1.8.3", 
"angular-bootstrap": "^2.1.3", 
"ui.bootstrap": "ui-bootstrap#^2.1.3", 
"angular-ui-router": "^0.3.1" 
},

내 app.js

angular 
.module('myApp', [ 
    'ngRoute', 
    'ngTouch', 
    'ngAnimate', 
    'ngMap', 
    'underscore', 
    'ui.bootstrap' 
])

누군가가 내가 일을 할 수있는 것을 지적시겠습니까 잘못된 ? 자세한 정보를 제공해야하는지 알려주세요.

출처

2016-08-30 Raghuveer

장 부트 스트랩 cdn URL을 한 번. 그것은 나를 위해 작동합니다. bootstrap css cdn link

답변에 대한

angular.module('plunker', ['ui.bootstrap']).controller('AccordionDemoCtrl', function($scope){ 
 
    
 
    $scope.groups = [ 
 
    { 
 
     title: "Title 1", 
 
     items: [{"item-title": "item 1"}, {"item-title": "item 2"}] 
 
    }, 
 
    { 
 
     title: "Title 2", 
 
     items: [{"item-title": "item 3"}, {"item-title": "item 4"}] 
 
    } 
 
    ]; 
 
    
 
});

<!doctype html> 
 
<html ng-app="plunker"> 
 
    <head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script> 
 
    <script src="example.js"></script> 
 
    <!-- <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> --> 
 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="AccordionDemoCtrl"> 
 

 

 
    <accordion> 
 
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups"> 
 
     <ul> 
 
     <li ng-repeat="item in group.items">{{item['item-title']}}</li> 
 
     </ul> 
 
    </accordion-group> 
 
    </accordion> 
 
</div> 
 
    </body> 
 
</html>

출처

2016-08-30 17:52:13

감사하지만 여전히 작동하지 않습니다. 나는 과거에 그것을 시도하고 다시 시도했다. 아직 운이 없다 : ( – Raghuveer

오오 ... 그것은 나를 위해 완벽하게 작동했다. 다른 브라우저에서도 확인했다. 모든 종속성 cdn에서, 나는이 문제가 발생하는 이유는 단서가 없다 ??? –

그건 정확히 내 질문이다. 그것은 작동합니다. 독립 실행 형이지만 내 응용 프로그램에서는 작동하지 않습니다. 내 plunker 링크는 작업 복사본이지만 응용 프로그램에 동일한 코드를 추가하면 중단됩니다.이 문제를 범위 지정하는 것으로 의심되지만 해결 방법을 찾을 수 없습니다. 도움을 주셔서 감사합니다. – Raghuveer

앵글 아코디언이 html을 수정하지 못함

답변

관련 문제