AngularSlideables does not work on div with generated html (ng-bind-html)

[Legchewer]

I was trying to get it working on a div which loads in content with html tags, but as long as there is an ng-bind-html attribute on the .slideable element it does not work.

The error given is "Uncaught TypeError: Cannot read property 'style' of null", when trying to log the content variable, you get "null".

AngularSlideables does work with html tags in the div and it works when I remove ng-bind-html (which is not an option for me).

Code example:

<ul class="list list-slideout small-12 columns">
            <li ng-repeat="tip in tips_list">
                <h2 slide-toggle="#tip-content-{{tip.id}}">{{ tip.title }}</h2>
                <div id="tip-content-{{tip.id}}" class="list-item-content slideable" ng-bind-html="tip.body">
                    {{ tip.body }}
                </div>
            </li>
</ul>

[select]

I discovered the same problem, it is because .directive('slideable', calls var contents = element.html(); but element is in this case an array.

[select]

I ended up using this code

app.directive('slideToggle', function() {
  'use strict';
  return {
    restrict: 'A',
    scope: {
      isOpen: '=slideToggle' // 'data-slide-toggle' in our html
    },
    link: function(scope, element, attr) {
      var slideDuration = parseInt(attr.slideToggleDuration, 10) || 200;

      // Watch for when the value bound to isOpen changes
      // When it changes trigger a slideToggle
      scope.$watch('isOpen', function(newIsOpenVal, oldIsOpenVal) {
        if (newIsOpenVal !== oldIsOpenVal) {
          element.stop().slideToggle(slideDuration);
        }
      });

    }
  };
});