Не удалось нажать ng-click в контроллере angularjs?

Question

я определили различные контроллеры и соответствующий шаблон URL в 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 
    }) 
} ]); 

Мой TestParseController как определено:

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> 

div правильно заполняется, но ng-click для заполненной кнопки не работает, однако он корректно работает для тега h3, который доступен на самой странице.

Кто-то пожалуйста, помогите ..

Answer 1

Изменить как заполнить innerh DIV, используя следующие вместо $scope.content (и удалить ng-bind-html из innerh дел):

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

в функцию to_trusted1:

$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/

Решение 2:

Более AngularJS способ может быть использование $timeout.

Вы можете использовать его, чтобы быть уверенным, что содержимое включено в div. Вы должны также получить то, что находится внутри DIV, потому что это то, что будет составлен с: angular.element(document.getElementById('innerh')).contents():

Так будет:

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

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

Answer 2

Есть причина, по которой вы не создаете директиву? Ваша реализация довольно грязная. Вот то, что я создал в jsfiddle:

http://jsfiddle.net/5qa6uy2y/

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