Assigning events outside of slides

[David Trinh]

I am trying to assign an event in the following codes:

<div class="section">
<div class="slides" ng-repeat="slide in main.slides">
<!-- data for slides here -->
</div>
<div class="move-footer">
<span class="glyphicon glyphicon-menu-up" data-ng-click="main.moveUp()"></span>
 </div>
</div>

The ng-click binding does not work.

I read the original fullPage.js FAQ, which states:

Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, or even horizontal slides, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js

so I tried:

afterRender: function() {
        var vm = $(this);
          vm.moveUp = function() {
            $.fn.fullpage.moveSectionUp();
          };
    }

Is there a way to get my ng-click event to work in this case? Thanks in advance.

[Mathew Kleppin]

afterRender is an asynchronous call that happens outside of angular regular digest cycle. I also don't recommend binding vm to $(this), as this is a javascript reference to an object, and vm is a naming schema to reference a controller.

You would be better off just creating something inside the controller:

function HomeController(){
  var vm = this;
  vm.moveUp = moveUp;

  function moveUp() {
    $.fn.fullpage.moveSectionUp();
  }
}

The reference to this is the same as using $scope. there is a great talk on the subject of using components and component methodology that can be found here on youtube. https://www.youtube.com/watch?v=KdIretrDPhA

[David Trinh]

I have actually tried that before trying using the afterRender function. From my understanding of the FAQ, the slides class is a dynamically added DOM, so any event handler added at that time does not work. So something like this works

<div class="section">
<div class="move-footer">
<!-- ng-click works -->
<span class="glyphicon glyphicon-menu-up" data-ng-click="main.moveUp()"></span>
 </div>
</div>

but this won't:

<div class="section">
<div class="slides" ng-repeat="slide in main.slides">
<!-- data for slides here -->
</div>
<div class="move-footer">
<!-- ng-click gets disabled here -->
<span class="glyphicon glyphicon-menu-up" data-ng-click="main.moveUp()"></span>
 </div>
</div>

Is there a way to add the event binding to the dynamic slides?

[Mathew Kleppin]

Can you create a plunker or jsbin with an example of this?

Something like this works for me.

controller.js

function MainController(){
  var vm = this;
  vm.yell = function(word){ alert(word); };

  vm.slides = [ 
    { title: 'test 1' }
  ];

  vm.addSlide = function(title) {
    slides.push({title: title});
  }
}

page.html

<div full-page>
  <div class="section active" id="section1">

    <div class="slide">
      <div class="intro">
        <h1 ng-click="vm.yell('blarg')">Test Slides</h1>
    <button ng-click="vm.addSlide('test 2');">Add Slide</button>
      </div>
    </div>

    <div ng-repeat="slide in vm.slides" class="slide">
      <div class="intro" ng-click="vm.yell('slide added')" >
        <h1>{{ slide.title }}</h1>
      </div>
    </div>

  </div>

  <div class="section" id="section2">
    <div class="intro">
      <h1 ng-click="vm.yell('section 2')" >Example</h1>
    </div>
  </div>
</div>

[David]

I made a plunker here.

If I try to put it directly in the slides, it does get called, but the issue is then the absolute position of the element will be messed up (it overlaps).

[Mathew Kleppin]

Ah, well that's actually a problem with layers and one overlapping another because of their position in the dom tree. This happens with absolute/fixed position elements, and is solved by adding a z-index to elements in conflict.

This works:

https://plnkr.co/edit/W9rM6mNPhHYroSn2MBHL?p=preview

Only thing i added was z-index to #test in the .css file

[David]

Oh wow, thanks! That did the trick.