CODEWITHSUNDEEP
angularjsangularjs-ng-clickng-bind-html
Parul Abrol
Parul Abrol

Reputation: 563

Unable to hit ng-click in angularjs controller?

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

Upvotes: 3

Views: 725

Answers (2)

Hoyen
Hoyen

Reputation: 2519

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

Upvotes: 0

Michael
Michael

Reputation: 3326

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/

Upvotes: 1

Related Questions