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)文章
Angular.js中ng-include用法及多標(biāo)簽頁(yè)面的實(shí)現(xiàn)方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標(biāo)簽頁(yè)面的實(shí)現(xiàn)方式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
本文主要介紹AngularJS 迭代器過(guò)濾,這里提供了詳細(xì)的知識(shí)資料，并附示例代碼，有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了AngularJS多視圖切換用法,結(jié)合實(shí)例形式分析了AngularJS基于多視圖切換實(shí)現(xiàn)碎片文件動(dòng)態(tài)載入的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
Ionic+AngularJS實(shí)現(xiàn)登錄和注冊(cè)帶驗(yàn)證功能
這篇文章主要介紹了Ionic+AngularJS實(shí)現(xiàn)登錄和注冊(cè)帶驗(yàn)證功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
本篇文章主要介紹了Angular中使用better-scroll插件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
promise是一種用異步的方式處理值的方法，promise是對(duì)象，代表了一個(gè)函數(shù)最終可能的返回值或者拋出的異常，在與遠(yuǎn)程對(duì)象打交道時(shí)我們可以把他看作是遠(yuǎn)程對(duì)象的一個(gè)代理，通過(guò)本文給大家介紹AngularJS中處理多個(gè)promise的方式及什么是promise，需要的朋友參考下2016-02-02
Renderer2 類是 Angular 提供的一個(gè)抽象服務(wù),允許在不直接操作 DOM 的情況下操縱應(yīng)用程序的元素,本文給大家介紹了如何在 Angular 中使用 Renderer2,文中通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
如何利用AngularJS打造一款簡(jiǎn)單Web應(yīng)用
如果大家希望在應(yīng)用程序的創(chuàng)建工作中采取各類最佳實(shí)踐，那么AngularJS也能夠帶來(lái)極大的助益。總而言之，這套框架的強(qiáng)大功能與特性永遠(yuǎn)不會(huì)讓有著應(yīng)用開(kāi)發(fā)需求的朋友們失望2015-12-12
詳談angularjs中路由頁(yè)面強(qiáng)制更新的問(wèn)題
下面小編就為大家?guī)?lái)一篇詳談angularjs中路由頁(yè)面強(qiáng)制更新的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
這篇文章主要介紹了angular表單驗(yàn)證的相關(guān)知識(shí),angular來(lái)驗(yàn)證可以定義樣式的，下文通過(guò)代碼給大家實(shí)例介紹下，需要的朋友可以參考下2016-10-10