Unable to hit ng-click in angularjs controller?

Question

i have defined different controllers and corresponding template url in app.js :

var App = angular.module('FormApp', [ 'ngRoute','ui.bootstrap', 'dialogs', 'oc.modal' ]);

App.config([ '$routeProvider', function($routeProvider) {
    $routeProvider.when('/addClient', {
        templateUrl : '../../resources/partialHtml/addClientLayout.html',
        controller : FormController
    }).when('/conflist/:commandName/:client/:env', {
        templateUrl : '../../resources/partialHtml/testPrase.html',
        controller : TestParseController
    }).when('/addNewCommand', {
        templateUrl : '../../resources/partialHtml/addNewCommand.html',
        controller : AddNewCommandController
    })
} ]);

My TestParseController is as defined :

var TestParseController = function($scope, $window, $http, $routeParams, $sce,
        $compile) {

    $scope.hide = function(obj) {
        alert($routeParams.commandName);
    };

    $scope.to_trusted1 = function(html_code) {
        html_code = $sce.trustAsHtml(html_code);
        $scope.content = html_code;
        alert(html_code);
        $compile( document.getElementById('innerh'))($scope);
    };

    $http.get('client/getConfList/' + $routeParams.commandName)
    .success(
            function(data) {
            $scope.html_content = "<button data-ng-click='hide($event)'>Click me!</button>";
            $scope.to_trusted1($scope.html_content);
                });
}

Html : testParse.html :

<h3 data-ng-click="hide($event)" class="plus">Add</h3>

<div ng-bind-html="content" id="innerh">    </div>

The div gets properly populated but ng-click for populated button is not working, however it properly works for h3 tag which is available in page itself.

Somebody please help..

Try this: http://stackoverflow.com/questions/23762376/angularjs-ngclick-not-working-on-dynamically-added-html — Andrei Filimon, Mar 27 '15 at 14:32

Michael · Accepted Answer · 2015-03-27T15:26:39.783

Change how you populate the innerh div using the following instead of $scope.content (and remove ng-bind-html from the innerh div):

document.getElementById('innerh').innerHTML = html_code;

into the to_trusted1 function:

 $scope.to_trusted1 = function(html_code) {
        html_code = $sce.trustAsHtml(html_code);
        $scope.content = html_code;
        //alert(html_code);
        document.getElementById('innerh').innerHTML = html_code;

  };

jsfiddle: https://jsfiddle.net/m37xksxk/

Solution 2:

A more AngularJS way might be to use $timeout.

You can use it to be sure that content is included inside the div. You have also to get what's inside the div, because that's what's going to be compiled, with: angular.element(document.getElementById('innerh')).contents():

So it will become:

    $timeout( function(){ 
        $compile( angular.element(document.getElementById('innerh')).contents())
           ($scope);
        }, 0);

jsfiddle 2: https://jsfiddle.net/m37xksxk/1/

score 0 · Answer 2 · answered Mar 27 '15 at 16:09

Is there a reason you're not creating a directive? Your implementation is pretty messy. Here's something I created in jsfiddle:

http://jsfiddle.net/5qa6uy2y/

app.directive('testContent', function () {
    return {
        template: "<button data-ng-click='hide($event)'>Click me!</button>"
    };
});

Unable to hit ng-click in angularjs controller?

2 Answers2