0

I'm trying to build a "fold out" directive. The HTML always have a title and some content. The title should always be shown, and when you push the title, the content will be shown as well.

Also the content will bind to the view controller.

Controller.js: 

app.controller('MyController', function(...) {
     $scope.my_variable = "HELLO WORLD";
});

HTML: 

<div roll-down>
        <div id="open-on" class="title">
           MY TITLE
        </div>

      <div class="content">
          {{my_variable}}    <--- controller, not directive. 
      </div>
</div>

RollDownDir.js: 

app.directive('rollDown', function(...) {
    var linkFn;
    linkFn = function(scope, element, attrs) {

      var title     = element[0].querySelector('.title');
      var content   = element[0].querySelector('.content');

      var content_buffer = angular.copy(content);
      content.remove();

      var addContent = function(){
          element.append(content_buffer); 
          $compile(content_buffer)(scope);
      }

      angular.element(element).on('click', function (evt) {
        addContent(); 

        $ionicScrollDelegate.resize();
        $rootScope.$apply();
        scope.$apply();
      });
    };

    return {
        restrict: 'AEC',
        link: linkFn
    };
});

Now this works fine BUT, the binding in the controller "my_variable" will never be compiled. So it will just be empty? How can I overcome this?

I have to remove the content DOM completely for performance (it is for mobile application, and the content is heavy stuff like SVGs etc.).

Jolle
  • 1,336
  • 5
  • 24
  • 36
  • this might help http://stackoverflow.com/questions/19385543/access-controller-scope-from-directive – Ja9ad335h Apr 12 '17 at 14:59
  • `
    `
     – Daniel Lizik Apr 12 '17 at 15:17
  • No, unfortunately this won't help me ^.. The point is that the directive does not know anything about the content. It just makes sure to remove it, and to be able to add the content later on again. – Jolle Apr 12 '17 at 15:23
  • 1
    first compile, then append. Also this directive looks like ng-if... – Petr Averyanov Apr 12 '17 at 15:48
  • @PetrAveryanov But how can I control the ng-if from the directive? – Jolle Apr 12 '17 at 15:57
  • you dont need this directive) Your directive, presented here, compile and add content to element -- this is exactly waht ngIf does. – Petr Averyanov Apr 12 '17 at 16:00
  • I know that. I want to make this an easy re-usable directive to help me hide things and add animated roll-down effects etc. The example is simplified by removing UI part. – Jolle Apr 12 '17 at 16:05

0 Answers0