Comments (5)
$compile
Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.
下面Code中使用了$compile方法
angular.module("app").directive("editorInitializer", function($compile, $templateCache) {
return {
restrict: 'E',
templateUrl: '/templates/editor_initializer.html',
controller: function($scope) {
$scope.edit = function(row) {
$scope.$broadcast('edit', row);
};
},
link: function(scope, element, attributes) {
scope.$on('edit', function(e, row) {
var editor = $compile($templateCache.get("/templates/editor.html"))(scope);
$(editor).insertAfter(element.parents("tr"));
});
console.log('linked editorInitializer');
}
};
});
更多细节可以参看 html compile
from cuf_meeting_knowledge_share.
$templateRequest
$templateRequest(tpl, [ignoreRequestError]);
$templateRequest
service 使用$http
service将所需要的html模板下载下来 并存到$templateCache
中. 如果 HTTP 请求失败 或者 返回的数据为空, 一个$compile
异常将会被抛出 (这个异常可以通过设置第二参数为true,阻止掉).
如何使用
angular.module("app", []).run(function($templateRequest) {
$templateRequest("/templates/editor.html");
});
from cuf_meeting_knowledge_share.
$templateCache
这个service就不多说了,大家可以自己参考文档,$templateRequest
将模板存入它里面。我只需要通过$templateCache
的get方法取出来就行。
directive definition object (参考官方文档)
var myModule = angular.module(...);
myModule.directive('directiveName', function factory(injectables) {
var directiveDefinitionObject = {
priority: 0,
template: '<div></div>', // or // function(tElement, tAttrs) { ... },
// or
// templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
transclude: false,
restrict: 'A',
templateNamespace: 'html',
scope: false,
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
controllerAs: 'stringIdentifier',
bindToController: false,
require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
// or
// return function postLink( ... ) { ... }
},
// or
// link: {
// pre: function preLink(scope, iElement, iAttrs, controller) { ... },
// post: function postLink(scope, iElement, iAttrs, controller) { ... }
// }
// or
// link: function postLink( ... ) { ... }
};
return directiveDefinitionObject;
});
附赠一份angular directive生命周期
from cuf_meeting_knowledge_share.
require other directives
在directive definition object 中配置require,可以使一个指令,也可以是一个指令数组
require: '^foo'
或这 require:['^foo', 'bar']
, 这样就可以在link方法中使用你require的指令的controller方法中的方法了,当然有时候,你需要自己引入自己,可以参照 https://github.com/angular-ui/bootstrap/blob/master/src/buttons/buttons.js 非常有意思。
注意这些语法:
(no prefix) - Locate the required controller on the current element. Throw an error if not found.
? - Attempt to locate the required controller or pass null to the link fn if not found.
^ - Locate the required controller by searching the element and its parents. Throw an error if not found.
^^ - Locate the required controller by searching the element's parents. Throw an error if not found.
?^ - Attempt to locate the required controller by searching the element and its parents or pass null to the link fn if not found.
?^^ - Attempt to locate the required controller by searching the element's parents, or pass null to the link fn if not found.
from cuf_meeting_knowledge_share.
directive communication ($scope.$broadcast, $scope.$on)
指令之间的沟通,数据传递和交换,可以通过$broadcast 和 $emit 方法传递事件的方式进行沟通
$broadcast 向 scope children 传递
$emit 向 scope parents 传递
大家可以参考,本视频的例子 https://github.com/davemo/advanced-directives-with-angular-js/blob/master/grid_directives.js
from cuf_meeting_knowledge_share.
Related Issues (20)
- 2015-3-5 Shim和Polyfill的区别
- 2015-3-13 Angular的Table 组件 HOT 5
- 2015-3-23 angular-translate || angular controller as syntax HOT 3
- 2015-4-2 Angular file upload directive || JavaScript跨域总结 HOT 2
- 2015-4-14 angular实现ng-repeat递归 HOT 3
- 2015-4-21 Angular ng-repeat-start && ng-repeat-end HOT 1
- 2015-5-20 YouTube精彩Angular视频 Reusable Components in Angular HOT 3
- 2015-5-30 使用gulp HOT 3
- 2015-6-2 使用$provide.decorator方法去扩展angular现有指令
- 2015-6-8 使用ngModel.NgModelController
- 2015-6-19 Angular资料整理(Angular Style Guide and so on)
- 2015-7-10 使用UI Router实现AngularJS 多步骤表单(渣译)
- 2015-7-16 7 个必不可少的 JavaScript 函数 (渣译)
- 2015-8-3 AngularJS 常见问题集锦
- 2015-8-21 Angular Debug 小技巧 HOT 1
- 2015-8-25 几个原生DOM方法 || Modular Javascript HOT 1
- 2015-10-13 OSX初体验 HOT 4
- 2015-12-18 ng-conf 精彩视频 Dave Smith - Deep Dive into Custom Directives
- 2016-2-16 2015 CUF Team 总结 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cuf_meeting_knowledge_share.