[英]ng-Show doesn't work with directives
I have a directive which is shown (or should to) if "isEmpty" variable is true 我有一个指令,如果“ isEmpty”变量为true,则显示(或应该显示)
// index.html
<div empty-notes-screen coleccion="Notes" ng-show="isEmpty"></div>
// directive.js
angular.module('myApp')
.directive('emptyNotesScreen', function () {
return {
templateUrl: 'views/notes/emptynotesscreen.html',
replace: true,
scope : {
coleccion : '='
},
link : function (scope, elm,attrs){
scope.$watchCollection('coleccion', function(newValue) {
if(newValue.length>0){
scope.isEmpty = false;
}
else{
scope.isEmpty = true;
}
console.log('isEmpty: ',scope.isEmpty);
console.log(' coleccion has changed');
});
}
};
});
// views/notes/emptynotesscreen.html
<div class="white-text">
<div class="center grey darken-2" style="padding: 45px;">
<img width="180px" src="images/ignotize-white.png">
<h4>There's no notes yet!</h4>
<p>Please, add a note at least to see it here.</p>
</div>
</div>
Also, I have a controller that looks like this: 另外,我有一个看起来像这样的控制器:
// scripts/index.js
angular.module('myApp')
.controller('IndexNoteCtrl', function ($scope, NoteResource) {
$scope.Notes = NoteResource.query();
});
The result is, scope.isEmpty changes accordingly but in the HTML, the isEmpty never changes!! 结果是,scope.isEmpty相应地发生了变化,但是在HTML中,isEmpty从未改变! So that HTML never show or hide.
这样,HTML就不会显示或隐藏。 I don't know why or where I am doing something wrong.
我不知道为什么或在哪里做错了什么。
You are defining the variable isEmpty
on the scope of the directive. 您正在指令范围内定义变量
isEmpty
。
But you are trying to use this variable outside of the directive, where it has no value. 但是您正在尝试在指令之外使用该变量,而该指令没有任何值。 You can fix this problem in at least two ways:
您可以通过至少两种方式解决此问题:
1) Move the ng-show
so that it inside the template for the directive: <div class="white-text" ng-show="isEmpty">...</div>
1)移动
ng-show
,使其位于指令模板内: <div class="white-text" ng-show="isEmpty">...</div>
2) Get rid of the watcher, and isEmpty
and everything related to it. 2)摆脱观察者,
isEmpty
及其相关的一切。 Then in your index.html where you use the directive use ng-show: ng-show="Notes.length >0"
然后在您使用伪指令的index.html中,使用ng-show:
ng-show="Notes.length >0"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.