How to run a function in an angularjs directive

Question

I have this Directive:

.directive('reorderDiv', function ($compile) {
    return function (scope, elem, attrs) {

        function shuffle(array) {
            var currentIndex = array.length, temporaryValue, randomIndex;

            // Elemente
            while (0 !== currentIndex) {

                // Die restlichen Elemente
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;

                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }

            return array;
        }
        elem.on('click', function () {

          console.log('called');
          var divs = angular.element(document.querySelector('.center'));
          console.log(divs);

          divs = shuffle(divs);
          var content = $compile(divs)(scope);
          elem.append(content);
        })
    }
})

My goal is, that if the view loads it should run the function shuffle and not on a click on the element. How can i do this?

I tried to use elem.on("load")[...] but this didn't work. Could somebody explain me, why this does not work?

Just call shuffle function after on click event..

Pankaj Parkar
– Pankaj Parkar

2016-07-27 16:47:15 +00:00
Commented Jul 27, 2016 at 16:47 — Pankaj Parkar
– Pankaj Parkar, Commented Jul 27, 2016 at 16:47
hmm, that did not work. Also after a refresh..

olivier
– olivier

2016-07-27 16:48:12 +00:00
Commented Jul 27, 2016 at 16:48 — olivier
– olivier, Commented Jul 27, 2016 at 16:48
Check this blog.thoughtram.io/angularjs/2016/03/29/…

Naveen
– Naveen

2016-07-27 17:21:15 +00:00
Commented Jul 27, 2016 at 17:21 — Naveen
– Naveen, Commented Jul 27, 2016 at 17:21

Dev Shah · Accepted Answer · 2016-07-27 17:31:46Z

You can use $onInit event to fire shuffle function when directive loads:

.directive('reorderDiv', function($compile) {
  function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;

        // Elemente
        while (0 !== currentIndex) {

            // Die restlichen Elemente
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }

        return array;
  }
  var obj = {
    controller: function() {
      this.$onInit = function() {
        var divs = angular.element(document.querySelector('.center'));
        console.log(divs);

        shuffle(divs);
      }
    },
    link: function(scope, elem, attrs) {

      elem.on('click', function() {

         console.log('called');

         var divs = angular.element(document.querySelector('.center'));
         console.log(divs);

         divs = shuffle(divs);
         var content = $compile(divs)(scope);
         elem.append(content);
      })
    }

  };
  return obj;
})

Varit J Patel · Accepted Answer · 2016-07-27 16:48:07Z

0

Just call the shuffle function with correct parameter inside directive. It will run.

answered Jul 27, 2016 at 16:48

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

3 Comments

olivier Over a year ago

That didn't work. I removed the on.click. Logs get called but the divs won't reorder.

Varit J Patel Over a year ago

have you called like divs = shuffle(divs); or shuffle(divs); ?

olivier Over a year ago

Like so: divs = shuffle(divs); var content = $compile(divs)(scope); elem.append(content); When i call it with shuffle(divs); also nothing happens. Is there a way to fire it when the view loads?

Collectives™ on Stack Overflow

How to run a function in an angularjs directive

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related