Question

我将Angular js帖子中的html数据绑定到HTML div，但在绑定的html内容中未触发ng点击。

这是我的绑定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")
            }
        );
    }
});

该位置是我在openTicketHistory div中调用detailBlock函数。并且不触发ngClick事件。我该怎么办？

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

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

html绑定后未触发ngClick事件

2 个答案: