javascript - 使用 AngularJS 和 MaterializeCSS 初始化 Accordion

Question

我已经使用materializecss框架制作了这个 Accordion :

<ul class="collapsible" data-collapsible="accordion">
                    <li id="licollapse" ng-repeat="single in packageNames">
                        <div class="collapsible-header">{{single.name}}</div>
                        <div class="collapsible-body"><p>{{single.name}}</p></div>
                    </li>
                </ul> 

实际上，我尝试了多种方法来初始化这个 Accordion ，但没有成功!我尝试在html View 中编写:

<script>$('.collapsible').collapsible();</script>

它不起作用，我尝试在我的 Controller 中创建

$scope.collapsible = function() {
             $('.collapsible').collapsible({
                 accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
             });
         };

并在 Accordion 的ng-init中调用collapsible函数，但它不起作用。我找到的唯一一个解决方案是在 collapsible-header 中的 ng-click 中调用该函数，但这不是最好的方法，因为它仅在第二次单击时有效。我解决了吗？

Answer 1

当您被迫放弃调用外部 jQuery 框架或在 Angular 应用程序中使用 jQuery 的愿望时，最好的方法是在指令中执行此操作!

Controller 中的 DOM 永远不应该被触及，相反， Controller 中数据的状态应该更新 View 。

因此，在这种情况下，我们可以创建一个简单的指令，该指令可以访问该元素并调用相关函数:

app.directive('collapsify', [collapsifyFn]);

function collapsifyFn(){
  return {
    restrict: 'A',
    compile: function(element, attrs) {
     return {
       pre: function preLinkFn(scope, element, attrs) {
         //if executed here collapsable only is called on an empty <ul>
       }, 
       post: function postLinkFn(scope, element, attrs) {
         function linkFn(scope, element, attributes) {
           debugger;
           $(element).collapsible({accordion: true});
         }
       }
     }  
    }
  }
}

这里需要注意的重要事项:

前置和后置链接的用例:

因为你正在生成你的 <li>通过 ng-repeat，您需要确保您正在调用 .collapsible在您的链接函数中之后ng-repeat已呈现<li>到 DOM。

由于渲染优先级，简单的link:会导致ng-repeat link:之后执行，使您的可折叠功能无法正常工作。 post:的目的是它执行linkFn在其 child 之后linkFn已经执行了。

因此您准确地调用了 .collapsible在“完全渲染的 dom”上。

现在我们已经创建了我们的 super 幻想 collapsify指令，我们可以将它附加到 dom 上。

<ul collapsify class="collapsible" data-collapsible="accordion">
   <li id="licollapse" ng-repeat="single in packageNames">
      <div class="collapsible-header">{{single.name}}</div>
      <div class="collapsible-body"><p>{{single.name}}</p></div>
   </li>
</ul> 

来自 Codepen 的示例:

<p data-height="268" data-theme-id="0" data-slug-hash="meoWEK" data-default-tab="result" data-user="TheLarkInn" class='codepen'>See the Pen <a href='http://codepen.io/TheLarkInn/pen/meoWEK/'>Using Collapsible MaterializeCSS</a> by Sean Larkin (<a href='http://codepen.io/TheLarkInn'>@TheLarkInn</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>