码迷,mamicode.com
首页 > Web开发 > 详细

angluarjs中指令的使用方式

时间:2015-08-19 00:05:48      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:

本人初学者,如有不足虚心求教!

 

angular指令的模块可以分下面几个部分:

  • restrict:用于操作dom的[E]元素,[A]属性,[C]样式,同时也能组合使用
  • priority:设置当前指令的优先级,用于同一个页面下面调用不同指令的时候
  • replace:用于替换dom元素
  • template:定义指令模版
  • templateUrl:用url的加载方式加载模版
  • controller:在指令中添加控制器,可以用自己$scope的作用域
  • link:用于绑定dom元素事件的,可以设置数据绑定

下面一个简单的例子:

angular.module(‘expanderModule‘, [])
.directive(‘expander‘, function(){
return {
restrict: ‘EA‘,
replace: true,
transclude: true,
scope: { title:‘=expanderTitle‘ },
template: ‘<div>‘ +
‘<div class="title" ng-click="toggle()">{{title}}</div>‘ +
‘<div class="body" ng-show="showMe" ng-transclude></div>‘ +
‘</div>‘,
link: function(scope, element, attrs) {
scope.showMe = false;
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
}
}
}
});

 

angluarjs中指令的使用方式

标签:

原文地址:http://www.cnblogs.com/2014-1130/p/4740897.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!