Javascript 动态生成的html按钮,ng单击不处理按钮单击

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=

我有下面的代码,其中基于rest调用生成一个按钮列表。单击按钮时,我需要在页面右侧显示一个屏幕。屏幕根据所单击的按钮而变化

下面是动态填充按钮的代码

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){


            });
        }
    }