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

я определил разные контроллеры и соответствующий 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, который доступен на самой странице.

Помогите кто-нибудь..


angularjs angularjs-ng-click ng-bind-html
person Parul Abrol    schedule 27.03.2015    source источник
comment
Попробуйте это: stackoverflow .com/questions/23762376/   -  person Andrei Filimon    schedule 27.03.2015

Ответы (2)


arrow_upward
1
arrow_downward

Измените способ заполнения внутреннего элемента div, используя вместо $scope.content следующее (и удалите ng-bind-html из внутреннего элемента div):

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/

person Michael    schedule 27.03.2015

arrow_upward
0
arrow_downward

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

http://jsfiddle.net/5qa6uy2y/

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