javascript - angular directive问题
本文介绍了javascript - angular directive问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html ng-app='expanderModule'>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
</head>
<body>
<div ng-controller='SomeController'>
<expander class='expander' expander-title='title'><!-- ？？？？expander-title='title' 是什么意思-->
{{text}}
</expander>
</div>
</body>
<script>
var expanderModule=angular.module('expanderModule', []);
expanderModule.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
scope : {
title : '=expanderTitle'//这里是什么意思？？？？？？？？
},
template :
'<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs) {
scope.showMe = false;
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
}
}
}
});
expanderModule.controller('SomeController',function($scope) {
$scope.title = '点击展开';
$scope.text = '这里是内部的内容。';
});
</script>
</html>问一下，在html expander标签里的expander-title='title'是什么意思跟下面directive指令里的scope对象有什么关系？为什么要声明scope:{title:'=expanderTitle'}
解决方案
scope : {
title : '=expanderTitle'//这里是什么意思？？？？？？？？
},这个scope参数用于定义指令是否需要独立的scope。
scope参数赋值有三种情况：
1、scope:true/false;
直接用布尔类型表示是否需要，如果为true则指令有单独的scope，如果没有则为父scope。
2、scope:{}
scope等于一个object对象，则表示需要单独的scope，并且scope会包含这个object对象中的属性，但是这个属性的规则是有要求的。
分为三种，@、=、&
@ 绑定的是一个字面量值
= 是双休绑定父页面上的一个属性
& 要求绑定父页面上的一个function
例如：
scope:{
title:@titleStr
name:=parantName,
fly:¶ntFly
}
最终指令的scope初始化后就会有这title、name、fly 这三个属性。
需要说明的是例如expanderTitle，指的是html上元素的属性expander-title
如果不需要重命名，也可以直接忽略后面的定义
scope：{
title:@title
}
//等于
scope:{
title:@
}
其他的具体的请仔细搜索参考。
如果有不明白的可以继续留言,以上代码评论区手打，没实际运行验证。
这篇关于javascript - angular directive问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
