ngClick event not fire after html binding

0
votes

I binded html data from angular js post to Html div, but not ng click is fired in the binding html content.

This is my binding html div.

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

This my bind function with 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")
            }
        );
    }
});

The place is I call the openTicketHistory function inside detailBlock div. And not firing the ngClick event. What can I do?

2
javascriptjqueryhtmlangularjs

2 Answers

0
votes

Check This Out

<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.
-->
0
votes

First, here are some best practices

  1. You should not access the DOM from your controller, don't try to think like Jquery where you have to access the DOM element in order to update it (See conceptual overview chapter from angularjs docs)
  2. Avoid using $scope in your controller, use "controller as syntax instead"
  3. Avoid using $http inside your controller, use an angularjs service instead

As for the solution, you can just use Angularjs's Data binding feature to bind the model (inside the Controller) to the view

$scope.ticket = response.data

in the view:

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

Here is the link to a working jsfiddle : http://jsfiddle.net/bhjd4kto/25/

EDIT : if your goal is to display html content inside #detailBlock, you can use angular-sanitize and ng-bind-html directive, here is an example : http://jsfiddle.net/bhjd4kto/45/