CODEWITHSUNDEEP
javascriptangularjs
Ruslanas Balčiūnas
Ruslanas Balčiūnas

Reputation: 7428

How to execute external function on element when it is created in AngularJS?

I want to run some function from external library on every item when it is created in AngularJS. How would I do that? You can see code of my application below.

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.blocks = [
    {name: 'item #1'},
    {name: 'item #2'}
  ];
});
<script src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
<script>
  // this function is provided by external library
  // I want to setup each block in ng-repeat
  // it manipulated DOM
  function setupBlock(elm, name) {
    elm.innerHTML = name + ' [ready]';
  }
</script>

<body ng-controller="MainCtrl" ng-app="app">
  <div ng-repeat="block in blocks">{{block.name}}</div>
</body>

Upvotes: 0

Views: 1291

Answers (3)

Ruslanas Balčiūnas
Ruslanas Balčiūnas

Reputation: 7428

Answer to my own question. Full working code snippet. Based on accepted answer.

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.blocks = [
    {name: 'item #1'},
    {name: 'item #2'}
  ];
}).directive('externalBlock', function() {
  return {
    restrict: 'A',
    scope: {
      block: '=data'
    },
    link: function(scope, elm, attrs) {
      setupBlock(elm[0], scope.block);
    }
  }
});
<script src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
<script>
  // this function is provided by external library
  // I want to setup each block in ng-repeat
  // it manipulated DOM
  function setupBlock(elm, block) {
    elm.innerHTML = block.name + ' [ready]';
  }
</script>

<body ng-controller="MainCtrl" ng-app="app">
  <div ng-repeat="block in blocks" external-block data="block"></div>
</body>

Upvotes: 1

Tom Arad
Tom Arad

Reputation: 251

Create a directive that takes a parametername for it:

.directive('myDirective', function() {
  return {
    restrict: 'A',
    scope: {
      name: '='
    },
    link: function(scope, elm, attrs) {
      // Call your function here!
      elm[0].innerHTML = scope.name;
    }
  }
})

See a full example here: http://plnkr.co/edit/3SOWZrRHOldMRUEl7l0Z

Note: When DOM manipulation is necessary always use directives!

EDIT: To pass the whole object to the directive do rewrite the scope object of it:

scope: {
  block: '=data'
}

and in your ng-repeat markup:

<div ng-repeat="block in blocks" my-directive data="block"></div>

Upvotes: 1

Ahmad Karimpour
Ahmad Karimpour

Reputation: 64

you can use $rootScope

[1]: https://docs.angularjs.org/api/ng/service/$rootScope "

[2]: http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/ "

for example in JS: 

(function() {
  var global;

  global = (function() {
    function global($rootScope) {
      $rootScope.view_directory = "something";
    }

    return global;

  })();

  angular.module('yourapplication').run(['$rootScope', global]);

}).call(this);

for example in coffeescript (ngClassify) : 

class global extends Run
    constructor: ($rootScope) ->

        $rootScope.view_directory  = "something"

Upvotes: 1

Related Questions