demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.expandertsp {
border: 1px solid black;
width: 250px;
}
.expandertsp > .title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.expandertsp > .body {
padding: .1em .3em;
}
</style>
</head>
<body ng-app='expanderModule'>
<div ng-controller='SomeController'>
<expander class='expandertsp' expander-title='title'>
</expander>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<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" >{{text}}</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 = ' class为"bodydiv 绑定的text为什么不显示呢？';
});
</script>
</body>
</html>
第一个问题：自定义指令directive 模板template 里面的{{text}}为什么运行没显示。而
{{title}}又显示了呢？不明白。第2个问题呢：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.expandertsp {
border: 1px solid black;
width: 250px;
}
.expandertsp > .title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.expandertsp > .body {
padding: .1em .3em;
}
</style>
</head>
<body ng-app='expanderModule'>
<div ng-controller='SomeController'>
<expander class='expandertsp' expander-title='title'>
{{text}}
</expander>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<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 = ' class为"bodydiv 绑定的text为什么不显示呢？';
});
</script>
</body>
</html>
自定义指令directive 里面的scope 理解局部变量 内部改变 不影响 其他控制器对应变量 解释正常？
我把
scope: { title: '=expanderTitle' }里面的expanderTitle改成其他的 就显示不出来了 不理解。 =是双向绑定 可在控制器里面没看到 expanderTitle呢？
显示效果
求解答
2 回答
qq_花开花谢_0
TA贡献1835条经验 获得超7个赞
不才刚学Angular没多久 还没理解透暂且给点建议作参考
这俩问题应该都是隔离scope的问题 第一个问题里面的scope已经被隔离了 text没有定义 而且这时的title也不是$scope.title
这个title是expander-title绑定的数据 恰恰你又绑到了$scope.title上。。
第二个问题 expanderTitle要去找expander-title 指令里面名字好像用驼峰法 外面使用的时候用的‘-’
刚学没多久可能说的不够明白还请见谅~
添加回答
举报
0/150
提交
取消