Angular JS: binding a click event after angular renders HTML DOM

Question

I am using AngularJS for the first time, I have done some search but could'nt find a satisfactory answer.I am trying to fetch some data from server and binding it to page html elements on page load. But I have to also bind click event of those angular generated html elements.

app.controller('searchController', ['$scope','$timeout','service','$sce', function($scope, $timeout,service, $sce) {
 {
     $scope.results=[];
     service.getResults(function(data) {
       results=data;
      });// fetches data from server;

 }

I am fetching some results using an ajax call and updating the scope variable. In my html I am using ng-repeat and binding to this array, like below

<div ng-controller="searchController">
   <input type="text" class="result_text" ng-repeat="result in results" value="{{result.text}}"></input>

</div>

Now I want to bind the click events on all elements with class result_text

Currently I am doing this using $watch and $timeout

$scope.$watch("results", function (value) {  

$timeout(function() {
   $(".result_text").click(function(){  //do something });
     }, 1);
 });

Is this the right approach. If I am not using $timeout it would run the click binding code before the html is rendered by angular.

Does this code actually populate the results? (Should results=data; be $scope.results=data;?) What are you trying to do in //do something? — Anthony Chu
– Anthony Chu, Commented Apr 18, 2014 at 7:29
@AnthonyChu yes its a typo, its $scope.results . Please note this is a theoretical question I am trying to invoke another request on click. — Subin Sebastian
– Subin Sebastian, Commented Apr 18, 2014 at 7:38

Nikola Yovchev · Accepted Answer · 2014-04-18 07:34:05Z

3

No, this is not the right approach. There are directives that do that.

replace the ugly $(".result_text").click` in your contorller with:

data-ng-click="someFunction()"  (https://docs.angularjs.org/api/ng/directive/ngClick)

in your template.

Your results can be like this:

service.getResults(function(data) {
    $scope.results=data;
});

answered Apr 18, 2014 at 7:34

Nikola Yovchev

10.4k4 gold badges50 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ruslan Ismagilov · Accepted Answer · 2014-10-27 11:15:40Z

3

You can also use a directive inside ng-repeat element that will know when ng-repeat has finished.

<div ng-controller="searchController">
  <input type="text" class="result_text" ng-repeat="result in results" value="{{result.text}}" finish-render></input>
</div>

Each item in ng-repeat has $index and $last - that is true when item is the last.

app.directive('finishRender', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function () {
          $(".result_text").click(function(){
            //do something
          });
        });
      }
    }
  }
});

edited Oct 27, 2014 at 11:15

answered Apr 18, 2014 at 7:38

Ruslan Ismagilov

1,3487 silver badges14 bronze badges

1 Comment

Subin Sebastian Over a year ago

Thanks, thats some useful info, I my case ng-click solves it.

Talha · Accepted Answer · 2017-07-02 15:44:53Z

0

I would recommend to use the simple on click and access functions and variables via

angular.element(angular_app_controller_element).scope().var/function()

answered Jul 2, 2017 at 15:44

Talha

1,64620 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular JS: binding a click event after angular renders HTML DOM

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related