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

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

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

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

1.首先將我們要賦值給頁面的數據new一下

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

2.用$compile函數編譯一下上邊的內容

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

3.將編譯好的內容插入到頁面中

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

完成

以下是完整版本

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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