(function () {
'use strict';
angular.module('ui.component.commentContent',[])
.directive('uiComponentCommentContent',commentContent)
commentContent.$inject = [];
function commentContent(){
return {
restrict: 'EA',
// template:
// '<div>'+
// '<div class="sem"">'+
// '<div class="circle"">{{commentContent.term}}</div>'+
// '</div>' +
// '<div style="display:none" ng-show="isShow">'+
// '<div ng-transclude></div>'+'</div>'+
// '</div>',
// replace: true,
transclude: true,
scope:{
commentContent:"=",
isShow:"@",
},
templateUrl:"components/uiComponents/commentContent/commentContent.tpl.html",
controller: function ($scope) {
$scope.show = function () {
// $scope.isShow = !$scope.isShow;
if($scope.isShow == 'true'){
$scope.isShow = 'false';
}else{
$scope.isShow = 'true';
}
}
},
};
};
}());
<div>
<div class="sem" ng-class="{active:isShow == 'true'}">
<div class="circle" ng-click="show()">{{commentContent.term}}</div>
</div>
<div ng-show="isShow == 'true'">
<div ng-transclude></div>
</div>
</div>
如上,我写了个组件,然后我调用的时候使用ng-repeat调用
<ui-component-comment-content ng-repeat="commentContent in ctrl.commentContents" is-show="{{$index == 0}}" comment-content="commentContent">
<ui-component-comment-content-text ng-repeat="commentContentText in commentContent" comment-content-text="commentContentText"></ui-component-comment-content-text>
</ui-component-comment-content>
现在做到了点击能单个的展示或者隐藏,怎么做到点击展示其中一个但是隐藏其他的呀?
我没非常仔细得看,暂时说几点:
1,我猜测你在你的controller里写了$scope.show的方法, 而没有贴出来, directive中的controller并不是你想的那种用法, 所以directive中的controller用你的那种方法是不会调用的。
2,写法方面 $scope.isshow = !$scope.isshow就可以了, 你觉得呢。
3,完成你的需求需要嵌套指令, 你可以参考一下angular-bootstrap的手风琴写法
4,如果我空下来回来还没有人解答你我可以稍微给你写个大概思路
点击时传个$index进去,判断展开隐藏时多判断一下当前index跟传进去了index相不相等