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條經(jīng)驗 獲得超7個贊
不才剛學Angular沒多久 還沒理解透暫且給點建議作參考
這倆問題應該都是隔離scope的問題 第一個問題里面的scope已經(jīng)被隔離了 text沒有定義 而且這時的title也不是$scope.title
這個title是expander-title綁定的數(shù)據(jù) 恰恰你又綁到了$scope.title上。。
第二個問題 expanderTitle要去找expander-title 指令里面名字好像用駝峰法 外面使用的時候用的‘-’
剛學沒多久可能說的不夠明白還請見諒~
添加回答
舉報
0/150
提交
取消