快捷導(dǎo)航

詳解angularJS動(dòng)態(tài)生成的頁面中ng-click無效解決辦法

更新時(shí)間：2017年06月19日 15:26:25 作者：lee_ds

這篇文章主要介紹了詳解angularJS動(dòng)態(tài)生成的頁面中ng-click無效解決辦法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

今天碰到了一個(gè)這樣的需求，在自己寫的動(dòng)態(tài)的頁面中，寫入的AngularJS無效不能點(diǎn)擊響應(yīng)事件，以下給出代碼以及解決方案

1.首先將我們要賦值給頁面的數(shù)據(jù)new一下

var html = "<a href='javascript:void(0);' ng-click='test()'></a>"

2.用$compile函數(shù)編譯一下上邊的內(nèi)容

var $html = $compile(html)($scope);

3.將編譯好的內(nèi)容插入到頁面中

$("body").append($html);

完成

以下是完整版本

app.controller('customersCtrl', function ($scope, $http,$compile) { 
$scope.test = function(){ 
  alert('test'); 
} 
 
// TODO 動(dòng)態(tài)生成html中 ng-click無效 解決方法 $compile 是傳進(jìn)來的 
//下邊這句話就是要寫入頁面中的內(nèi)容，首先把你寫入的內(nèi)容賦值給html 
var html = "<a href='javascript:void(0);' ng-click='test()'></a>" 
  
 
//用$compile進(jìn)行編譯 
 
var $html = $compile(html)($scope); 
 
 
//添加到頁面中，或者你任何想添加的位置。}); 
 
$("body").append($html);

這樣ng-click就可以觸發(fā)function了

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS學(xué)習(xí)第二篇 AngularJS依賴注入
這篇文章主要為大家詳細(xì)介紹了AngularJS學(xué)習(xí)第二篇，理解什么是AngularJS依賴注入，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
Angular設(shè)置title信息解決SEO方面存在問題
爬蟲在檢索seo信息的時(shí)候會(huì)讀不了js給其賦的值，導(dǎo)致搜索引擎收錄不了或者收錄了無效的信息,下面本文給大家介紹Angular設(shè)置title信息解決SEO方面存在問題,需要的朋友可以參考下
2016-08-08
基于angularjs實(shí)現(xiàn)圖片放大鏡效果
這篇文章給大家分享了angularjs實(shí)現(xiàn)購物放大鏡效果的源碼實(shí)例，代碼介紹的很詳細(xì)，有需要的可以參考借鑒，下面來一起看看。
2016-08-08
AngularJS在IE下取數(shù)據(jù)總是緩存問題的解決方法
這篇文章主要介紹了AngularJS在IE下取數(shù)據(jù)總是緩存問題的解決方法,分析了問題的原因及AngularJS設(shè)置禁止IE對ajax緩存的實(shí)現(xiàn)方法,需要的朋友可以參考下
2016-08-08
關(guān)于AngularJS中ng-repeat不更新視圖的解決方法
今天小編就為大家分享一篇關(guān)于AngularJS中ng-repeat不更新視圖的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
模板視圖和AngularJS之間沖突的解決方法
這篇文章主要介紹了模板視圖和AngularJS之間沖突的解決方法,結(jié)合實(shí)例形式分析了AngularJS模板視圖沖突的原因并給出了2種解決方法供大家參考使用,需要的朋友可以參考下
2016-11-11
利用Angular2 + Ionic3開發(fā)IOS應(yīng)用實(shí)例教程
這篇文章主要給大家介紹了關(guān)于利用Angular2 + Ionic3開發(fā)IOS應(yīng)用的相關(guān)資料，文中通過示例代碼和圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01
AngularJS與后端php的數(shù)據(jù)交互方法
今天小編就為大家分享一篇AngularJS與后端php的數(shù)據(jù)交互方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
本篇文章主要介紹了AngularJS中使用ngModal模態(tài)框?qū)嵗?，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05