您的位置：首页 > Web前端 > AngularJS

angularjs 定义指令学习1

2015-06-04 18:09 302 查看

1、HTML中的定义方式与指令中可以不同，HTML中用XXXX-XXXX，在指令中用驼峰式，或者不用驼峰，形势一直。

2、可以在元素、属性、类名创建属性。

<lio></lio>

<div lio></div>

<p class="lio"></p>

<script>

var a=angular.module('lio',[]);

a.directive('lio',function(){

return{

restrict:'EAC',

template:'<a href="#">click here</a>',

replace:true

}

})

</script>

3、向指令中传数据

第一种：由所述控制器提供已经存在的作用域

把DOM中的值复制给指令的作用域，采用绑定机制。

<div my-lio my-name="http:\\" click-here="click me"></div>

<script>

var a=angular.module('lio',[]);

a.directive('myLio',function(){

return{

restrict:'EAC',

template:'<a href="{{myName}}">{{clickHere}}</a>',

replace:true,

scope:{

myName:'@',

clickHere:'@'

}

}

});

</script>

还可以绑定到指定的属性当中，如

<script>

var a=angular.module('lio',[]);

a.directive('myLio',function(){

return{

restrict:'EAC',

template:'<a href="{{myName}}">{{clickHere}}</a>',

replace:true,

scope:{

myName:'@',

clickHere:'@myName'

}

}

});

</script>

流程是：DOM复制到指令作作用域中（scope），指令作用域再对应template中的。

@绑定是一一对应。

第二种：数据绑定形式ng-model

模板中的数据初始化高于控制器中的：

<body ng-app="lio">

<div ng-controller="c">

<input type="text" ng-model="v.name" ng-init="v.name='sa'"/>

<span ng-bind="v.name"></span>

</div>

</body>

<script>

var a=angular.module('lio',[]);

a.controller('c',function($scope){

var v={};

v.name="Hello";

$scope.v=v;

})

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航