我们如何创建与ngIF指令相同的ngELSE指令？
下面是ngIfDirective的代码.我们应该为ngELSE定制代码吗？
var ngIfDirective = ['$animate',function($animate) {
return {
multiElement: true,transclude: 'element',priority: 600,terminal: true,restrict: 'A',$$tlb: true,link: function($scope,$element,$attr,ctrl,$transclude) {
var block,childScope,prevIoUsElements;
$scope.$watch($attr.ngIf,function ngIfWatchAction(value) {
if (value) {
if (!childScope) {
$transclude(function(clone,newScope) {
childScope = newScope;
clone[clone.length++] = document.createComment(' end ngIf: ' + $attr.ngIf + ' ');
// Note: We only need the first/last node of the cloned nodes.
// However,we need to keep the reference to the jqlite wrapper as it might be changed later
// by a directive with templateUrl when its template arrives.
block = {
clone: clone
};
$animate.enter(clone,$element.parent(),$element);
});
}
} else {
if (prevIoUsElements) {
prevIoUsElements.remove();
prevIoUsElements = null;
}
if (childScope) {
childScope.$destroy();
childScope = null;
}
if (block) {
prevIoUsElements = getBlockNodes(block.clone);
$animate.leave(prevIoUsElements).then(function() {
prevIoUsElements = null;
});
block = null;
}
}
});
}
};
}];
解决方法
通常我们这样使用
正常的if-else
if(video == video.large){
<!-- code to render a large video block-->
}
else{
<!-- code to render the regular video block -->
}
AngularJS ng-if
<div ng-if="video == video.large">
<!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
<!-- code to render the regular video block -->
</div>
但如果你太具体了,你想要一个像ng-if,ng-else-if和ng-else这样的指令,那么就使用ng-elif
<div ng-if="someCondition">
...
</div>
<p>
Some random junk in the middle.
</p>
<div ng-else-if="someOther && condition">
...
</div>
<div ng-else-if="moreConditions">
...
</div>
<div ng-else>
...
</div>
