当通过另一个javascript函数加载HTML时，Angular JS ng-click不起作用

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.

Answer 1

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

Answer 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.

Answer 3

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

Answer 4

我建议使用简单的onclick和访问函数和变量通过angular element（）.....玩得开心;）

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