Javascript 动态生成的html按钮,ng单击不处理按钮单击
我有下面的代码,其中基于rest调用生成一个按钮列表。单击按钮时,我需要在页面右侧显示一个屏幕。屏幕根据所单击的按钮而变化 下面是动态填充按钮的代码Javascript 动态生成的html按钮,ng单击不处理按钮单击,javascript,html,angularjs,Javascript,Html,Angularjs,我有下面的代码,其中基于rest调用生成一个按钮列表。单击按钮时,我需要在页面右侧显示一个屏幕。屏幕根据所单击的按钮而变化 下面是动态填充按钮的代码 var app = angular.module("HConfigureModule",[]); app.controller('HConfigureController',['$scope','$http',function($scope,$http){ $scope.myvalue = false; $scope.configurePList=
var app = angular.module("HConfigureModule",[]);
app.controller('HConfigureController',['$scope','$http',function($scope,$http){
$scope.myvalue = false;
$scope.configurePList= function(){
$scope.result = "" ;
$scope.searchValue = "";
$scope.namelist=[];
$scope.myvalue = true;
var protocol = window.location.protocol;
var hostDetails = window.location.host;
var instanceDetails = window.location.pathname;
var url = protocol + "//" + hostDetails
+ instanceDetails + "index";
//alert(url+'/getPluginsList.html');
var response = $http.get(url+'/getPlugList.html');
response.success(function(qResult){
var tst = qResult ;
var len = tst.length;
$scope.numStorages = len ;
var i;
var myEl = angular.element( document.querySelector('#connListDiv') );
for(i=0;i<len;i++)
{
$scope.result = myEl.append('<button type="button" style="word-wrap:break-word" ng-click="display1();" class="btn btn-default pluginClass dummy">'+qResult[i].name+'</button>');
$scope.namelist.push(qResult[i].name) ;
}
});
var testbutton = angular.element(document.querySelector('.dummy'));
testbutton.bind('click', $scope.display1());
};
我在这里面临的问题是,根据getPlugList.html响应,动态生成了大约10个按钮。但是按钮单击在第一次时只工作一次。因为按钮是动态生成的,所以我必须使用将单击事件绑定到按钮
需要帮助
您能告诉我是否有一个选项可以使ng click即使在初始加载后仍能工作。也就是说,我希望每次单击10个按钮中的一个时都能调用display1()
非常感谢您在这方面的任何帮助。提前感谢您正在寻找
$compile
。Angular程序员通常使用诸如ng repeat
和ng if
之类的指令来动态构建DOM。这些指令可以实例化ng click
和其他指令,这样在DOM被破坏时就不会出现内存泄漏。
$scope.display1 = function(){
var expluclass = angular.element( document.querySelector('.existingPluginClass')) ;
expluclass.show() ;
var nplugclass = angular.element( document.querySelector('.newPluginClass')) ;
nplugclass.hide();
angular.element( document.querySelector('.connDivClass')).hide();
var link = angular.element( document.querySelector('.pluginClass'));
link.removeClass("btn-primary");
var plugName = link.text().trim();
alert(plugName);
if(plugName == "HFS")
angular.element( document.querySelector('#connPropsDivHFS')).show();
else{
angular.element( document.querySelector('#connPropsDivOthers')).show();
var protocol = window.location.protocol;
var hostDetails = window.location.host;
var instanceDetails = window.location.pathname;
var url = protocol + "//" + hostDetails
+ instanceDetails + "index";
//alert(url+'/getPluginsList.html');
var response = $http.get(url+'/getSelectedPDetails.html?pluginName='+plugName);
response.success(function(queryResult){
});
}
}