anglular 自定义指令scope =

baoleilei6

于 2016-10-02 19:21:18 发布

阅读量578

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_34629352/article/details/52724659

本文通过一个具体的示例介绍了如何使用AngularJS创建自定义指令，并深入探讨了作用域的使用方式。示例中定义了一个名为'my'的自定义指令，该指令通过模板URL加载额外的HTML片段，并实现了样式更改的功能。此外，还定义了一个'scop'指令用于展示作用域绑定的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>

</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<my>
<div ng-bind="a"></div>

<scop qqq= 'data[0]' > </scop>
<scop qqq= 'data[1]' > </scop>
</my>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',['$scope',function($scope){
$scope.a = 'my';
$scope.data = [{name:'张三'},{name:'李四'}];

}])
.directive('my',function(){
return {
restrict:'E',
templateUrl :'myfirst.html',
replace:true,
transclude:true,
link:function(scope,ele,attri){
console.log(scope);
console.log(ele);
console.log(attri);
scope.changColor = function(){
ele.css('background-color','red');
}
}
}
})
.directive('scop',function(){
return {
restrict:'E',
template:'<div>{{qqq.name}} {{qqq.name}}</div>',
replace:true,
scope :{
qqq:'='
}

}
});
</script>
</html>