Angular JS ng-click not working when HTML loaded through another javascript function

Question

I have a javascript function that builds a tree from JSON data and creates a list of anchor tag elements like:

<a ng-click="shareParent(4619)">Some data</a>

This list is populated after the page is loaded. This ng-click doesn't get registered at the controller. Here is my controller:

catalog.controller('categoryTree', ['$scope',function($scope) {
    $scope.shareParent = function(parent) {
        console.log(parent)
      }
}]);

The data never shows up at the controller. I am a newbie, so I may be doing something really wrong here. I've even tried calling $scope.$apply(), but that doesn't do any good either.

The anchor element does have a controller associated with it and an ng-app is also declared. Just the ng-click isn't working.

EDIT:

Solved it using the following injector code in my controller after the DOM element was appended:

$injector = angular.element(document.querySelector('#categoryTree')).injector();
element = angular.element(document.querySelector('#category-tree'));
$injector.invoke(function ($compile) {
      var scope = element.scope();
      $compile(element)(scope);
   });

There may be a better way of doing this.

Have you used any controller for your view? Can you add complete code? — Sandip Nirmal
– Sandip Nirmal, Commented Mar 15, 2016 at 7:27
Complete code is very big, but yes there is a controller. Its called categoryTree — ishaan
– ishaan, Commented Mar 15, 2016 at 7:51
Make sure you have all the as inside a div with ng-controller="categoryTree". Also, why are you using a javascript function? You could use ng-repeat. — cst1992
– cst1992, Commented Mar 15, 2016 at 8:31
Because its a complicated tree using an API that gets data and then a heavy amount of manipulation which I don't think ng-repeat can help me with. The tree is built using simple javascript createElement functions. — ishaan
– ishaan, Commented Mar 15, 2016 at 8:36

Aminadav Glickshtein · Accepted Answer · 2016-03-15 08:47:16Z

4

When you create new HTML elements in Angular, you have to connect it to a scope. This is called compiling

For example:

function myController($scope,$compile,$element){

  //Creating New Element
  var newElement=$('<div ng-click=hello()>Hello World</div>')

  //Compile The Element, and assign it to current scope
  $compile(newElement)($scope)

  //Append the element, to wherever do you want. For example to current controller element
  newElement.appendTo($element)

  $scope.hello=function(){
     alert('It is working!')
  }
}

More Info: Angular $compile service

edited Mar 15, 2016 at 8:47

answered Mar 15, 2016 at 7:34

Aminadav Glickshtein

24.8k13 gold badges84 silver badges118 bronze badges

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

1 Comment

ishaan Over a year ago

So when I did this, i tried to bind the data using a {[{child}]} and ended up getting {"0":{"jQuery1113034352644230239093":69},"context":{"jQuery1113034352644230239093":69},"length":1} in response. Although the data in console seems fine.

ishaan · Accepted Answer · 2017-02-21 09:42:42Z

2

just try using $compile() ($scope)

something like

var domElement = $compile('your javascript to create dom elements')($scope);

and then you will need to append the DOM element to your page.

Hope this helps.

edited Feb 21, 2017 at 9:42

ishaan

2,0511 gold badge20 silver badges32 bronze badges

answered Mar 15, 2016 at 7:34

Shankar D

944 bronze badges

Comments

stanleyxu2005 · Accepted Answer · 2016-03-15 07:24:15Z

1

Your code looks quite okay. Have you bind the HTML to your controller categoryTree?

answered Mar 15, 2016 at 7:24

stanleyxu2005

8,31115 gold badges61 silver badges99 bronze badges

2 Comments

ishaan Over a year ago

There is a binding. The problem is that all the new elements are rendered after the page is loaded. So maybe that's why angularJS isn't registering them?

stanleyxu2005 Over a year ago

I guess you need compileService to load external html like this github.com/stanleyxu2005/dashing/blob/master/src/tabset/…

Talha · Accepted Answer · 2017-07-02 15:47:11Z

0

I would recommend to use the simple on onclick and access functions and variables via angular element() ..... have fun ;)

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

answered Jul 2, 2017 at 15:47

Talha

1,64620 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular JS ng-click not working when HTML loaded through another javascript function

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related