How to dynamically load directive into page
https://stackoverflow.com/questions/23556398/how-to-dynamically-load-directive-into-page
I have an html file with a controller and a directive with a template url. I want to load/compile the directive conditionally in the controller:
Controller:
app.controller('TestController', function TestController($http, $scope, $compile) {
$scope.loadData = function (pageId) {
var pUrl = <some url>
$http({
method: 'GET',
url: pUrl
}).success(function (data, status) {
$scope.pData = data;
var htm = '<test-directive></test-directive>';
var elm = angular.element("#id").append(htm);
$compile(elm)($scope);
}).error(function (data, status) {
alert('error');
});
};
$scope.loadData();
});
Directive:
'use strict';
app.directive('testdirective', function ($http) {
var uDirective = {};
uDirective.restrict = 'E';
uDirective.templateUrl = 'js/directives/testdirective.html';
uDirective.controller = function ($scope, $element, $attrs) {
$scope.showDirectiveData();
$scope.showDirectiveData = function () {
$scope.directiveDataCollection = <get data>;
};
};
uDirective.compile = function (element, attributes) {
// do one-time configuration of element.
var linkFunction = function ($scope, element, atttributes) {
};
return linkFunction;
};
return uDirective;
});
Template used in Directive
<div>
<div ng-repeat="directiveData in directiveDataCollection">
<span><h4>{{directiveData.Title}}</h4></span>
</div>
</div>
How do i get to compile the code in the TestController, load the directive dynamically, and finally load the content and append the content in scope?
--------------------------------------------------------------------------------------------------------------------------------------------------
Here is a general template for you to reference that abstracts and also demonstrates a few Angular concepts:
JS
.directive('parentDirective', function(Resource, $compile){
return {
restrict: 'E',
link: function(scope, elem, attrs){
Resource.loadData().then(function(result){
scope.data = result.data;
var htm = '<child-directive></child-directive>';
var compiled = $compile(htm)(scope);
elem.append(compiled);
});
}
}
})
.directive('childDirective', function(){
return {
restrict: 'E',
template: '<div>Content: {{data.key}}</div>'
}
})
.factory('Resource', function($http){
var Resource = {};
Resource.loadData = function(){
return $http.get('test.json');
}
return Resource;
})
HTML
<body ng-app="myApp">
<parent-directive></parent-directive>
</body>
Notice that there is no controller code. This is because controllers should never manipulate the DOM- one reason is that it will make your code a PITA to test. So, I put everything in directives, where it should probably be in your case as well.
I also moved the $http service into a factory. Anything state/model related should be in a service. Among other reasons, by doing this, you can inject it almost anywhere (including inside of directives) to access your data without worrying about it disappearing when a controller unloads.
EDIT
You should also consider the dissenting view of the dynamic loading approach in general in the accepted answer of Dynamically adding Angular directives
How to dynamically load directive into page的更多相关文章
- Page事件执行顺序
Page 执行中将按照如下顺序激活事件: Page.PreInit Page.Init Page.InitComplite Page.PreLoad Page.Load Page.LoadComple ...
- ASP.NET Page执行顺序【转】
一.ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件 ...
- iphone dev 入门实例6:How To Use UIScrollView to Scroll and Zoom and Page
http://www.raywenderlich.com/10518/how-to-use-uiscrollview-to-scroll-and-zoom-content Getting Starte ...
- Dynamically loading an external JavaScript or CSS file
原文: Dynamically loading an external JavaScript or CSS file 通过javascript动态加载css文件和javascript文件,主要是通 ...
- selenium page object model
Page Object Model (POM) & Page Factory in Selenium: Ultimate Guide 来源:http://www.guru99.com/page ...
- TWebBrowser: Determine when a page with Frames is completed
TWebBrowser: Determine when a page with Frames is completed 6 comments. Current rating: (3 votes). L ...
- Dynamically loading unmanaged OCX in C#
You'll have to perform a number of steps that are normally taken of automatically when you use the t ...
- angular directive 深入理解
由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...
- Selenium - WebDriver: Page Objects
This chapter is a tutorial introduction to page objects design pattern. A page object represents an ...
随机推荐
- 雅礼集训 Day1 T3 画作 解题报告
画作 题目描述 小\(\mathrm{G}\)的喜欢作画,尤其喜欢仅使用黑白两色作画. 画作可以抽象成一个\(r\times c\)大小的\(01\)矩阵.现在小\(\mathrm{G}\)构思好了他 ...
- atan 和 atan2
转自http://blog.csdn.net/chinabinlang/article/details/6802686 atan函数与atan2函数的一点区别 . atan 和 atan2 都是求反 ...
- angularjs的service
1.首先我们创建一个模块 var module = angular.module( "my.new.module", [] ); 2.然后写具体的service 可以看到它是一个很 ...
- POJ3984 BFS广搜--入门题
迷宫问题 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 20816 Accepted: 12193 Descriptio ...
- JDK源码分析--Collections
1. 集合框架图 2. HashMap 成员构成 HashMap是通过"拉链法"实现的哈希表.它包括几个重要的成员变量:table, size, threshold, loadFa ...
- nessus plugins 离线更新
1.打开 https://plugins.nessus.org/v2/offline.php 2.申请Activation Code http://www.tenable.com/products/n ...
- Cocos2d-x中图字原理之深入分析
http://cache.baiducontent.com/c?m=9d78d513d9921cfe05ac94281a16a632451294247c89df4f3992d15f9217465c02 ...
- 2.OpenStack-安装消息队列服务
安装消息队列服务(安装在控制器上) yum install rabbitmq-server -y systemctl start mariadb.service 配置消息队列服务 systemctl ...
- RobotFramework自动化2-自定义关键字【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/robotframework/ 前言 有时候一个页面上有多个对象需要操作,如果一个个去定 ...
- Android_html5交互 弹框localstorage 存值 整体案例
经历2周多的时间 终于是完成了还算可以的android 整体案例了,分享下给大家 也希望自己有时间回过头来看看当初研究android的纠结心情.痛苦的经历是开发android 大部分都是在网上找解决 ...