angular的自定义属性
一、 首先是自定义模板，
var app=angular.module('myapp',[]);
二、然后用自定义的模板去创建自己的指令，千万注意写法，虽然和创建控制器有点像但是没有等号，
app.directive('myBtn',[function(){ return{}}])
注意点：1，括号前面没有等号 2、第一个参数是自定义指令的名字 3、第二个参数是一个匿名函数，其中记得要有return返回值。
三、返回的参数
template:html代码
templateUrl:id值 <script id="tpl" type="text/ng-template"> <div class="flag"> <p>{{msg}}</p> <button class="{{mystyle}}" ng-transclude>登陆</button> </div> </script>
这里的id值链接到script的id值注意修改type属性 这种方法为推荐写法
restrict:"ECA"
这里的意思是设定的指令何时可用：元素，class，属性
transclude:true/fasle
这个的意思是可以自定义输入true为可以false为不可以
replace:true/false
这个的意思是否可以替换有该指令的元素
scope:{
mystyle:'@'
}
mystyle可以任意命名，@为固定写法，它的作用就是粘合模板中的mystyle和页面的mystyle
link:function(scope,element,attribute){
scope.msg='我是中国人'
element.on('click',function(){
alert('hello')
console.log('attribute')
})
这里的link是关联自定义指令内部的数据。这个msg在模板中可以直接使用。而element和attribute是对msg而言的
}
完整代码如下
app.directive('myBtn', [function(){ // 在这里直接return 一个对象就可以了 return { // template属性，是封装的ui // template:'<div><button>我是按钮</button></div>', // A.作用也是提供字符串，对应的内容会被添加到自定义指令所在位置 // 值是一个html文件所在位置 // B. 值也可以是一个script标签的id // templateUrl:'./01.template.html' templateUrl:'tpl', restrict:'ECA', // Attribute Class Element // 取代，替换 // replace: true, // 为true时，会把模板中的内容替换到自定义上。 // 为true时会把自定义标签中间的内容，插入到指定的模板中 transclude: true, // 可以得到自定义指令的属性 scope:{ // @开头，表示要获取自定义指令属性的值, // 在对应的模板可以直接使用{{tmp}} 来得到mystyle对应的值 // tmp:'@mystyle' mystyle:'@' // 这是上一行的简写 }, // 指定一个function link:function(scope,element,attributes){ // 参数: // scope: 类似于控制器时里的$scope,但是这里的scope属性值是在模板中使用的. scope.msg="我是中国人，我爱自己的祖国!" // element ： 指向模板最外层的对象 // 如果replace为true,指向的就是自定义指令所在标签 console.log(element) element.on('click',function(){ alert('你点我了!') }) // attributes : 这个对象里的属性就是自定义指令所在标签的属性 console.log(attributes) // angular.element console.log('link') } } }])
html的代码如下
<body ng-app="directiveApp"> <h1>以属性形式使用: A</h1> <div my-btn test="小明" age="18"></div> <h1>以样式名形式使用: C</h1> <div class="my-btn"></div> <h1>以自定义标签形式使用: E</h1> <my-btn mystyle="login"> 注册！！！ </my-btn> <my-btn mystyle="register"> 注册！！！002 </my-btn>
