今天遇到一个需求,要求在XXX条件下隐藏掉一个用directive生成的DOM。
directive部分如下:

1
2
3
4
5
6
7
8
app.directive("incNav", function() {
return {
scope:{
XXXXX
},
template: '<div>我是要被隐藏掉的DOM</div>'
};
});

看起来很简单啊,ng-show走起

1
<div ng-show="showDom">我是要被隐藏掉的DOM</div>

咦,这个DOM怎么就消失了

难不倒我,是我还没在controller里设置ng-show = true

1
2
3
4
var app = angular.module('myApp.controllers', []);
app.controller('myController', function($scope) {
$scope.showDom = true;
});

咦???!!!怎么还是没有

注释大法好


干掉了所有不相关的内容后终于确定问题出在这个directive上
1
1

1
2
3
4
5
6
7
8
9
10
11
app.directive("incNav", function() {
return {
scope:{
xxxx
},
template: '<div ng-show="showDom">我是要被隐藏掉的DOM</div>',
link: function ($scope) {
$scope.showDom = true;
}
};
});

问题解决

究其原因,是因为这个directive有一个独立的scope,所以它认为对应的ng-show应该在template内部

1
1

但是同时ng-repeat是不受影响的

1](https://c.usr.ink/emoji/tx140.gif),这是因为directive需要提前确定它需要注入的内容,ng-repeat是在directive范围外发生的,在这之前,template已经注入了![
1](https://c.usr.ink/emoji/tx140.gif),这是因为directive需要提前确定它需要注入的内容,ng-repeat是在directive范围外发生的,在这之前,template已经注入了![