詳解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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例
- vue.js 添加 fastclick的支持方法
- JavaScript中click和onclick本質(zhì)區(qū)別與用法分析
- JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
- JS中touchstart事件與click事件沖突的解決方法
- 詳解vue.js的事件處理器v-on:click
- AngularJS的ng-click傳參的方法
- Angularjs為ng-click事件傳遞參數(shù)
- JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能示例
- JS實(shí)現(xiàn)頁面中所有img對象添加onclick事件及新窗口查看圖片的方法
- js原生實(shí)現(xiàn)FastClick事件的實(shí)例
- 快速解決js開發(fā)下拉框中blur與click沖突
- Javascript中綁定click事件的四種方式介紹
相關(guān)文章
AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
這篇文章主要介紹了AngularJS數(shù)據(jù)綁定原理,較為詳細(xì)的分析了AngularJS數(shù)據(jù)綁定的原理、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
解決angular 使用原生拖拽頁面卡頓及表單控件輸入延遲問題
這篇文章主要介紹了angular 中使用原生拖拽頁面卡頓及表單控件輸入延遲問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Angular的FormArray和模態(tài)框結(jié)合使用實(shí)例詳解
這篇文章主要為大家介紹了Angular的FormArray和模態(tài)框結(jié)合使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
AngularJS的依賴注入實(shí)例分析(使用module和injector)
這篇文章主要介紹了AngularJS的依賴注入,結(jié)合實(shí)例形式分析了依賴注入的原理及使用module和injector實(shí)現(xiàn)依賴注入的步驟與操作技巧,需要的朋友可以參考下2017-01-01
掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開發(fā)技巧
這篇文章主要介紹了掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開發(fā)的技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
ionic3實(shí)戰(zhàn)教程之隨機(jī)布局瀑布流的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于ionic3實(shí)戰(zhàn)教程之隨機(jī)布局瀑布流的實(shí)現(xiàn)方法，文中通過示例代碼和圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
angularjs 動(dòng)態(tài)從后臺獲取下拉框的值方法
今天小編就為大家分享一篇angularjs 動(dòng)態(tài)從后臺獲取下拉框的值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫實(shí)例代碼
這篇文章主要介紹了基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了AngularJS入門知識之MVW類框架的編程思想探討,本文通過實(shí)現(xiàn)兩個(gè)簡單的業(yè)務(wù)需求,探討AngularJS和傳統(tǒng)的JavaScript控制DOM實(shí)現(xiàn)方式的差別,并嘗試?yán)斫?MVW此類框架在流行的Web前端開發(fā)中的編程思想,需要的朋友可以參考下2014-12-12
本文主要講解AngularJs bootstrap，這里整理了詳細(xì)的資料及簡單示例代碼幫助大家學(xué)習(xí)或者參考，有需要的小伙伴看下2016-09-09