Login / Join
Lazy loading angularJs View Dynamically
submitted on 25/03/2015 by
Codicode
+ infos
Config
Embed
Share
Lazy loading angularJs View Dynamically
by
Codicode
Programatically adding Html to the DOM from regular javascript outside the angularJs context and compiling the view at runtime without using angularJs directives.
The newly added html will be dynamically binded to its correspending controller.
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="4bc" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<html ng-app="app"> <head> <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> </head> <body> <h1>Dynamic HTML compilation</h1> <div id="mController" ng-controller="mainController"> ====== main controller ========= <br><br>my name: {{name}}<br> </div> <br>======== controller 2 ==========<br><br> <a href="#" onclick="setCnt();">Load view and controller dynamically</a><br><br> <div id="ee">Controller c2's view should be rendred here</div> </body> </html>
CSS
body{ background-color:#fff; margin:20px; text-align:center; }
Javascript
var app = angular.module('app', []); function setCnt() { // Injecting the view's html var e1 = angular.element(document.getElementById("ee")); e1.html('<div ng-controller="c2">my name: {{name}}</div>'); // Compile controller 2 html var mController = angular.element(document.getElementById("mController")); mController.scope().activateView(e1); } app.controller("mainController", function($scope, $compile) { $scope.name = "this is name 1"; $scope.activateView = function(ele) { $compile(ele.contents())($scope); $scope.$apply(); }; }); app.controller("c2", function($scope) { $scope.name = "this is name 2"; });
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact