Question

我使用materializecss框架制作了这个手风琴：

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

我真的尝试了几种方式来演奏这种手风琴但没有成功！我试着在html视图中写道：

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

它没有用，我试着在我的控制器中创建

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

并在手风琴的collapsible中调用ng-init功能，但无效。我找到的唯一一个解决方案就是在ng-click collapsible-header中调用该函数，但这不是最佳方式，因为它仅适用于第二次点击。我该如何解决？

Answer 1

当你被迫反对你渴望调用外部jQuery框架或在你的Angular应用程序中使用jQuery时，最好的方法是在指令中这样做！

不应在控制器中触及DOM，而是控制器中数据的状态应更新视图。

所以在这种情况下，我们可以创建一个简单的指令来访问该元素并调用有问题的函数：

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

这里需要注意的重要事项是：

前后链接的用例：

因为你是通过ng-repeat生成<li>的，所以你需要确保在 {{1>之后的链接函数中调用.collapsible已经将ng-repeat呈现给DOM。

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

因此，您正准确地在“完全渲染的dom”上调用linkFn。

现在我们已经创建了我们的超级.collapsible指令，我们可以将它附加到dom。

collapsify

来自Codepen的示例：

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

Answer 2

您应该等待调用您的具体化代码，如下所示：

$(document).ready(function(){
    $('.collapsible').collapsible({
      accordion : false
    });
  });

Answer 3

以这种方式做到

<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>
   <script>
//Instert this just after closing </li>             
    $(document).ready(function() {
    $('.collapsible').collapsible({
       accordion: true 
      });
     });
    </script>
</ul>

它肯定会起作用：）

用angularjs和materializecss

3 个答案:

前后链接的用例：

来自Codepen的示例：