The example in this article describes how ANGULARJS implements dynamic compilation into the DOM. Share to everyone for your reference, specific as follows:
In the use of ANGULARJS, I hope to dynamically build the angular template, and then through the angular to show.
Use the following methods:
<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 ('Hello:' + $ scope.userName);
}
// Dynamic compilation of HTML through $ compile
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>";
This code is the angular template, compiled from the Angularjs compiler, to access the object data in angular scope.
I hope this article will help you to Angularjs program design.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
