.directive('myDirective', myDirective)
.directive('myDirective1', myDirective1)
.directive('myDirective2', myDirective2)
myDirective.$inject = [];
myDirective1.$inject = [];
myDirective2.$inject = [];
function myDirective() {
return {
restrict: "EACM",
replace: true,
template: '<a href="http://www.baidu.com">百度一下</a>'
}
}
E<my-directive></my-directive>
A<div my-directive></div>
C<div class="my-directive"></div>
M<!-- directive:my-directive -->
function myDirective1() {
return {
restrict: "EMCA",
replace: true,
template: "<a href='{{myLink}}'>{{myText}}</a>",
scope: {
myLink: "@someAttr",
myText: "@"
}
}
}
eg1: <input type="text" ng-model="myurl">
<my-directive1 some-attr="{{myurl}}" my-text="{{1+2}}"></my-directive1>
function myDirective2() {
return {
restrict:"EMCA",
replace:true,
template:"<div><input type='text' ng-model='myUrl'><a href='{{myUrl}}'>{{myText}}</a></div>",
scope:{
myUrl:"=someAttr",
myText:"@"
}
}
/*return {
restrict: 'A',
replace: true,
scope: {
myUrl: '=someAttr', // 经过了修改
myText: '@'
},
template: '\
<div>\
<label>My Url Field:</label>\
<input type="text"\
ng-model="myUrl" />\
<a href="{{myUrl}}">{{myText}}</a>\
</div>\
'
}*/
}
eg2:
<input type="text" ng-model="theirUrl">
<my-directive2 some-attr="theirUrl" my-text="{{1+2}}"></my-directive2>
<!-- <label>Their URL field:</label>
<input type="text" ng-model="theirUrl">
<div my-directive2
some-attr="theirUrl"
my-text="Click me to go to Google"></div> -->