AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法
更新時(shí)間：2016年11月04日 10:45:29 作者：自由港
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法,結(jié)合實(shí)例形式分析了AngularJS動(dòng)態(tài)編輯構(gòu)建模板的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法。分享給大家供大家參考，具體如下：
在使用angularjs 時(shí)，希望通過(guò)動(dòng)態(tài)構(gòu)建angular模版，再通過(guò)angular進(jìn)行展示。
使用 方法如下：
<html ng-app="app">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/handlebars.min.js"></script>
<script src="assets/Handlebars.helper.js"></script>
<script >
var app=angular.module("app",[]);
app.controller('ctrl', ['$scope','$compile',function($scope,$compile){
$scope.userName='RAY';
$scope.test = function test(){
console.log('你好:' +$scope.userName);
}
//通過(guò)$compile動(dòng)態(tài)編譯html
var html="<button ng-click='test()'>{{userName}}</button>";
var template = angular.element(html);
var mobileDialogElement = $compile(template)($scope);
angular.element(document.body).append(mobileDialogElement);
}]);
</script>
</head>
<body ng-controller="ctrl">
</body>
</html>
var html="<button ng-click='test()'>{{userName}}</button>";
這種代碼就是angular模版，通過(guò)angularjs的編譯器進(jìn)行編譯，就能夠訪問(wèn)到angular scope中的對(duì)象數(shù)據(jù)。
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
這篇文章主要介紹了Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框的詳細(xì)過(guò)程及示例代碼，文中通過(guò)示例介紹的很詳細(xì)，相信會(huì)對(duì)大家學(xué)習(xí)使用Angularjs具有一定的參考借鑒價(jià)值，有需要的朋友們可以一起來(lái)看看。2016-10-10
這篇文章主要為大家詳細(xì)介紹了angular分頁(yè)指令操作的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
在AngularJS框架中處理數(shù)據(jù)建模的方式解析
這篇文章主要介紹了在AngularJS框架中處理數(shù)據(jù)建模的方式,作者同時(shí)也對(duì)AngularJS使用過(guò)程中的一些"坑"作了介紹,需要的朋友可以參考下2016-03-03
AngularJS基于MVC的復(fù)雜操作實(shí)例講解
下面小編就為大家分享一篇AngularJS基于MVC的復(fù)雜操作實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Promise是一個(gè)構(gòu)造函數(shù)，自己身上有all、reject、resolve這幾個(gè)異步方式處理值的方法，原型上有then、catch等同樣很眼熟的方法，下面通過(guò)實(shí)例代碼給大家講解angularjs promise 的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-03-03
AngularJS通過(guò)$location獲取及改變當(dāng)前頁(yè)面的URL
本篇將介紹AngularJS中的$location服務(wù)的基本用法,$location服務(wù)的主要作用是用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄。本文通過(guò)示例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-09-09
Angular.JS利用ng-disabled屬性和ng-model實(shí)現(xiàn)禁用button效果
這篇文章主要介紹了Angular.JS利用ng-disabled屬性和ng-model實(shí)現(xiàn)禁用button效果的相關(guān)資料，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
angularjs項(xiàng)目的頁(yè)面跳轉(zhuǎn)如何實(shí)現(xiàn)（5種方法）
本篇文章主要介紹了詳解angularjs項(xiàng)目的頁(yè)面跳轉(zhuǎn)如何實(shí)現(xiàn) ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
AngularJS入門心得之directive和controller通信過(guò)程
Angular JS (Angular.JS) 是一組用來(lái)開(kāi)發(fā)Web頁(yè)面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件，接下來(lái)通過(guò)本文給大家介紹AngularJS入門心得之directive和controller通信過(guò)程，對(duì)angularjs相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
快速解決angularJS中用post方法時(shí)后臺(tái)拿不到值的問(wèn)題
今天小編就為大家分享一篇快速解決angularJS中用post方法時(shí)后臺(tái)拿不到值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08