directive指令

.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> -->