AngularJS directive简述
2015-12-03 13:47
609 查看
转自:http://segmentfault.com/q/1010000002400734
官方API:http://docs.angularjs.cn/api/ng/service/$compile
一个民间详细介绍:http://blog.51yip.com/jsjquery/1607.html
问:
答:
这里你说的没错,
那
官方API:http://docs.angularjs.cn/api/ng/service/$compile
一个民间详细介绍:http://blog.51yip.com/jsjquery/1607.html
问:
angular.module('docsTransclusionExample', []) .controller('Controller', ['$scope', function($scope) { $scope.name = 'Tobias'; }]) .directive('myDialog', function() { return { restrict: 'E', transclude: true, scope: {}, templateUrl: 'my-dialog.html', link: function (scope, element) { scope.name = 'Jeff'; } }; });
答:
1.restrict E: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog> A: 表示该directive仅能以attribute方式使用,即:<div my-dialog></div> EA: 表示该directive既能以element方式使用,也能以attribute方式使用 2.transclude 你的directive可能接受页面上的其他html内容时才会用到,建议你先去掉该参数。有些高阶了。 3.scope 当你写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个。 4.templateUrl 你的directive里的html内容 5.link 可以简单理解为,当directive被angular 编译后,执行该方法
这里你说的没错,
link中的第一个参数
scope基本上就是你说的上面写的那个
scope。
element简单说就是
$('my-dialog')
attrs是个map,内容是你这个
directive上的所有属性,例如:你在页面上如果这样写了
directive:
<my-dialog type="modal" animation="fade"></my-dialog>
那
attrs就是:
{ type: 'modal', animation: 'fade' }
相关文章推荐
- AngularJS处理ASP.Net MVC Json返回日期
- AngularJS进阶(十六)脏值检查
- AngularJS进阶(十六)脏值检查
- angularjs之ui-bootstrap和ui-router结合使用
- angularjs之ui-bootstrap的使用
- angularjs-ui-router的使用
- angularjs指令的使用
- 我的第一篇博客随笔:关于angularjs API的理解心得。angular.bind() angular.boostrap()
- AngularJS进阶(十五)Cookie 'data' possibly not set or overflowed because it was too large
- AngularJS进阶(十五)Cookie 'data' possibly not set or overflowed because it was too large
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查
- AngularJS进阶(十四)AngularJS灵异代码事件
- AngularJS进阶(十四)AngularJS灵异代码事件
- 了解angular2--template(译)
- AngularJS Promise
- AngularJS过滤器
- angular模块控制器分离二
- angular模块控制器分离入门一
- AngularJS Best Practices: SEO
- AngularJS Best Practices: ui-router