javascript - Angularjs 将代码转换为指令或 ng-repeat

Question

我目前正在尝试将 json 响应转换为 jquery Accordion 。我已经让代码正常工作，并且想清理我的代码以使其更有意义。目前，我硬编码让它工作，从那里我尝试了 ng-repeat ，但我无法让它工作，因为它在每个可折叠 div 周围创建了一个，并导致了奇怪的结果，我的下一个猜测是转它进入一个指令，我不知道如何做到这一点而不具有与 ng-repeat 相同的结果。我创建了一个 Plunker 来帮助可视化这个问题。

http://plnkr.co/edit/e9h8H3URNJ4SunQtIPea?p=preview

KEY NOTE : The structure of the html can not change b/c of inherited CSS that cannot be changed.

任何帮助或指出正确的方向都会很好。此时，我会接受正确的工作 ng-repeat，或将其转换为有效的指令。

这是 JSON

$scope.documentTypes= [{"name":"name1","links": [{"rel":"self","href":"url1"}]},
{"name":"name2","links":[{"rel":"self","href":"url2"}]},
{"name":"name3","links":[{"rel":"self","href":"url3"}]},
{"name":"name4","links":[{"rel":"self","href":"url4"}]}];

正确的工作代码:

<div class="ui-accordion ui-widget ui-helper-reset accordion" id="accordion" role="tablist">
        <h3 tabindex="0"
            ng-click="setVariable(documentTypes[0])"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{documentTypes[0].name}}
            </a>
        </h3>

        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
            <p style="height:150px;">
                {{documentTypes[0]}}

            </p>
        </div>
        <h3 tabindex="0"
            ng-click="setVariable(documentTypes[2])"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{documentTypes[1].name}}
            </a>
        </h3>

        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
            <p style="height:215px;">
                {{documentTypes[1]}}
            </p>
        </div>
        <h3 tabindex="0"
            ng-click="setVariable(documentTypes[3])"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{documentTypes[2].name}}
            </a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
            <p style="height:215px;">
                {{documentTypes[2]}}

            </p>
        </div>
        <h3 tabindex="0"
            ng-click="setVariable(documentTypes[0])"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{documentTypes[3].name}}
            </a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             id="ui-accordion-accordion-panel-0" role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding:0px; padding-left:2px; margin:0px;">
            <p style="height:215px;">
                {{documentTypes[3]}}
            </p>
        </div>
    </div>

ng-重复:

  <h1>Trying NG-Repeat</h1>
<div class="ui-accordion ui-widget ui-helper-reset accordion" id="accordion" role="tablist">
  <div ng-repeat="docs in documentTypes">
    <h3 tabindex="0"
            ng-click="setVariable(docs)"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{docs.name}}
            </a>
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             id="ui-accordion-accordion-panel-0" role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding:0px; padding-left:2px; margin:0px;">
      <p style="height:215px;">
          {{docs}}
      </p>
    </div>
  </div>
</div>  

Answer 1

你可以稍微改变一下你的指令:

.directive('documentTypes', function (){
  return {
    restrict: 'E',
    replace: true, //html would be replaced to template
    templateUrl: 'document_type.html',
    link:function(scope,elem){
      setTimeout(function(){
        elem.accordion({ //you not need $(elem) because elem already jQuery element
          active: true,
          autoHeight: true,
          navigation: true,
          collapsible: true
        });
      });
    }
  }
})

并移至模板所有结构

<div class="ui-accordion ui-widget ui-helper-reset" role="tablist">
  <h3 ng-repeat-start="doc in documentTypes" tabindex="0" ng-click="setVariable(doc)" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" role="tab" aria-selected="false" aria-controls="ui-accordion-accordion-panel-0">
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
    <a href="#" style="font-size: .8em;">
        {{doc.name}}
    </a>
  </h3>
  <div ng-repeat-end class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex" role="tabpanel" aria-expanded="false" aria-hidden="true" aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
    <p style="height:150px;">
      {{doc}}
    </p>
  </div>
</div>

最后使用这个简单

<document-types></document-types>

WORKING PLUNKR