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: stackoverflow.com/questions/23762376/…

Andrei Filimon
– Andrei Filimon

2015-03-27 14:32:12 +00:00
Commented Mar 27, 2015 at 14:32 — Andrei Filimon
– Andrei Filimon, Commented Mar 27, 2015 at 14:32

Michael · Accepted Answer · 2015-03-27 15:26:39Z

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/

Hoyen · Accepted Answer · 2015-03-27 16:09:17Z

0

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>"
    };
});

answered Mar 27, 2015 at 16:09

Hoyen

2,5291 gold badge14 silver badges13 bronze badges

Collectives™ on Stack Overflow

Unable to hit ng-click in angularjs controller?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related