Question

如果“isEmpty”变量为真，我有一个显示（或应该）的指令

// 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>

另外，我有一个看起来像这样的控制器：

// scripts/index.js
angular.module('myApp')
  .controller('IndexNoteCtrl', function ($scope, NoteResource) {

    $scope.Notes = NoteResource.query();

  });

结果是，scope.isEmpty会相应地改变，但在HTML中，isEmpty永远不会改变！这样HTML就不会显示或隐藏。我不知道为什么或在哪里做错了什么。

Answer 1

您正在指令范围内定义变量isEmpty。

但是你试图在指令之外使用这个变量，它没有任何价值。您可以通过至少两种方式解决此问题：

1）移动ng-show以使其在指令的模板中：<div class="white-text" ng-show="isEmpty">...</div>

2）摆脱观察者，isEmpty以及与之相关的一切。然后在index.html中使用指令使用ng-show：ng-show="Notes.length >0"

ng-Show不适用于指令

1 个答案: