在angularjs中動態創建元素的點擊功能

我的應用中的點擊功能不適用於角度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中動態創建元素的點擊功能

回答

相關問題