一、 首先是自定义模板，
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和页面的mystylelink: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>
时间： 2024-06-13 16:03:30