无法在 angularjs 控制器中点击 ng-click？答案

【问题标题】：Unable to hit ng-click in angularjs controller?无法在 angularjs 控制器中点击 ng-click？
【发布时间】：2015-05-31 21:57:43
【问题描述】：

我在 app.js 中定义了不同的控制器和对应的模板 url：

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 标记。

请有人帮忙..

【问题讨论】：

试试这个：stackoverflow.com/questions/23762376/…

标签： angularjs angularjs-ng-click ng-bind-html

【解决方案1】：

使用以下内容而不是 $scope.content 更改您填充 innerh div 的方式（并从 innerh div 中删除 ng-bind-html）：

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/

【讨论】：

【解决方案2】：

您没有创建指令是有原因的吗？您的实现非常混乱。这是我在 jsfiddle 中创建的内容：

http://jsfiddle.net/5qa6uy2y/

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

【讨论】：