html 绑定后不会触发 ngClick 事件答案

【问题标题】：ngClick event not fire after html bindinghtml 绑定后不会触发 ngClick 事件
【发布时间】：2019-01-11 08:19:50
【问题描述】：

我将 html 数据从 angular js post 绑定到 Html div，但在绑定 html 内容中未触发 ng click。

这是我的绑定 html div。

<div ng-app="SupportManagement">
   <div ng-controller="SupportCtrl">
      <div ng-click="openModal(5)"></div> 
      <div id="detailBlock"></div> 
   </div>
</div>

这是我与 Angularjs Post 的绑定函数

angular.module("SupportManagement", [])
    .controller("SupportCtrl", function ($scope, $http) {

    $scope.openModal = function (ticketId) {
        $http.get('SupportDetail.aspx?ticketId='+ticketId).then(function (response) {
                $("#detailBlock").html(response.data);
            },
            function (error) {
               alert("fail");
               alert(error);
            }
        );
    }

    $scope.openTicketHistory=function(){
        var id= $('#tckId').attr('prob');
        $http.post('SupportDetail.aspx/ShowHistory',
            { ticketId: id }).then(function (success) {
                alert("success")
            }
        );
    }
});

这个地方是我在detailBlock div 中调用openTicketHistory 函数。并且不触发ngClick 事件。我能做什么？

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

看看这个

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>


  <div>
   <div ng-controller="SupportCtrl">

      <div id="detailBlock">{{myWelcome}}</div> 
      <md-button ng-click="openModal(5)">Test</md-button>
   </div>
</div>



  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>

  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('BlankApp', ['ngMaterial', 'ngMessages'])
     .controller("SupportCtrl", function ($scope, $http) {
       $scope.openModal = function (ticketId) {


                  $http.get('SupportDetail.aspx?ticketId='+ticketId)
               .then(function (response) {


                   $("#detailBlock").html(response.data);

               },
               function (error) {
                   alert("fail");
                   alert(error);
               }
               );
              }

              $scope.openTicketHistory=function(){


                 var id= $('#tckId').attr('prob');

                  $http.post('SupportDetail.aspx/ShowHistory',
                     { ticketId: id }).then(function (success) {

                       alert("success")

                     });
              } 
              });

  </script>

</body>
</html>

<!--
Copyright 2016-2018 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://material.angularjs.org/latest/license.
-->

【讨论】：

请使用我的整个代码并尝试。它在这里工作正常，没有任何问题

【解决方案2】：

首先，这里有一些最佳实践

您不应该从控制器访问 DOM，不要尝试像 Jquery 那样思考，您必须访问 DOM 元素才能更新它（参见 angularjs 文档中的 conceptual overview chapter）
避免在控制器中使用 $scope，使用“controller as syntax instead”
避免在控制器中使用 $http，而是使用 angularjs 服务

至于解决方案，您可以使用 Angularjs 的数据绑定功能将模型（在 Controller 内部）绑定到视图

$scope.ticket = response.data

在视图中：

<div id="detailBlock">{{ticket}}</div>

这是一个工作 jsfiddle 的链接：http://jsfiddle.net/bhjd4kto/25/

编辑： 如果您的目标是在#detailBlock 中显示 html 内容，您可以使用 angular-sanitize 和 ng-bind-html 指令，这是一个示例：http://jsfiddle.net/bhjd4kto/45/

【讨论】：

İ 之前尝试过，但我的问题不同。我用 angularjs 编译器指令解决了这个问题。谢谢。
您是从响应中获取 json 数据还是某些 html 数据？如果你解决了，你能发布解决方案吗？
在这种情况下，我认为您可以使用 ng-bind-html 指令而无需创建自定义指令。 ng-bind-html 为你编译 (docs.angularjs.org/api/ng/directive/ngBindHtml)