Функция щелчка для динамически созданного элемента в angularjs

Функция click в моем приложении не работает для динамически создаваемых элементов в угловой js.Функция щелчка для динамически созданного элемента в angularjs

Вот мой код:

HTML код

<div ng-app="myApp" ng-controller="myCtl"> 
    <p> 
     Click is not working in table 
    </p> 
    <table border="1"> 
     <tr ng-repeat="value in person.records"> 
      <td>{{value.firstname}}</td> 
      <td>{{value.age}}</td> 
      <td ng-bind-html="value.button"></td> 
     </tr> 
    </table><br /> 
    <br /> 
    <p> 
     When I click on Click button, My function should be call like below 
    </p> 
    <button class="btn btn-primary" type="button" ng-click="trailClick()">Click</button> 

</div>

JS код: В таблице, когда я нажимаю на «нажмите кнопку», я не получаю функциональности я хочу.

var app = angular.module("myApp", ['ngSanitize']); 
app.controller("myCtl", function($scope, $sce) { 
    $scope.trailClick = function() { 
     alert('Clicked '); 
    } 
    $scope.person = { 
     "records": [{ 
      firstname: "John", 
      lastname: "Doe", 
      age: 50, 
      eyecolor: "blue" 
     }, { 
      firstname: "Dev", 
      lastname: "Raj", 
      age: 50, 
      eyecolor: "black" 
     }] 
    }; 

    var cln_btn = '<button class="btn btn-primary" type="button" ng-click="trailClick()">Click</button>'; 
    for (var x = 0; x < $scope.person.records.length; x++) { 
     $scope.person.records[x].button = $sce.trustAsHtml(cln_btn); 
    } 
});

источник

2016-08-31 Habib

нам нужно больше информации. вы включили файл .js внутри своего представления? есть ли у вас какие-либо ошибки в консоли? – Karim

не должно быть console.alert()? –

Да. Я включаю файлы angular.js & Sanitize.js в своем приложении. В консоли нет ошибок. Пожалуйста, найдите код ниже: https://jsfiddle.net/habibullah/vkby5fkt/14/ Спасибо – Habib

Вы можете найти много информации об этой проблеме, глядя на stackoverflow.

Короче вы можете создать свою собственную директиву или установить this one

angular-bind-html-compile

включить его в приложение в качестве зависимости:

angular-bind-html-compile

и называют его

bind-html-compile

В код будет выглядеть так:

<!DOCTYPE html> 
<html> 
<head> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.3.15" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script> 
    <script src="angular-bind-html-compile.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script> 
    var app = angular.module("myApp", ['ngSanitize', 'angular-bind-html-compile']); 
    app.controller("myCtl", function($scope, $sce, $compile) { 
     $scope.trailClick = function() { 
      alert('Clicked '); 
     } 
     $scope.person = { 
      "records": [{ 
       firstname: "John", 
       lastname: "Doe", 
       age: 50, 
       eyecolor: "blue" 
      }, { 
       firstname: "Dev", 
       lastname: "Raj", 
       age: 50, 
       eyecolor: "black" 
      }] 
     }; 
     var cln_btn = '<button class="btn btn-primary" type="button" ng-click="trailClick()">Click</button>'; 
     for (var x = 0; x < $scope.person.records.length; x++) { 
      $scope.person.records[x].button = $sce.trustAsHtml(cln_btn); 
     } 
    }); 
    </script> 
</head> 
<body ng-app="myApp"> 
    <div ng-controller="myCtl"> 
     <p> 
      Click is not working in table 
     </p> 
     <table border="1"> 
      <tbody> 
       <tr ng-repeat="value in person.records"> 
        <td>{{value.firstname}}</td> 
        <td>{{value.age}}</td> 
        <td bind-html-compile="value.button"></td> 
       </tr> 
      </tbody> 
     </table> 
     <br /> 
     <br /> 
     <p> 
      When I click on Click button, My function should be call like below 
     </p> 
     <button class="btn btn-primary" type="button" ng-click="trailClick()">Click</button> 
    </div> 
</body> 
</html>

Я создал plunker

источник

2016-08-31 16:28:03

Спасибо большое чувак .. Его работа. Я буду применять в своем коде завтра ... :) – Habib

Функция щелчка для динамически созданного элемента в angularjs

ответ

Смежные вопросы