NG-顯示不指示工作

我已經被示出一個指令（或應）如果「的isEmpty」變量是真NG-顯示不指示工作

// 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從不顯示或隱藏。我不知道我爲什麼或在哪裏做錯了什麼。

來源

2015-11-08 Frankistan

可能是由於'''replace：true''' – Grievoushead

您是在調試控制器還是指令？如果一個指令 - 你嘗試手動把你的控制器'$ scope.isEmpty = true;'看看指令提供了什麼？ – shershen

您的'isEmpty'從未出現在其中'ngShow'評估的父範圍中。 –

您正在定義指令範圍內的變量isEmpty。

但是你試圖在指令之外使用這個變量，它沒有任何價值。您可以在至少兩種方式解決這個問題：

1）將ng-show以便它的模板指令內：<div class="white-text" ng-show="isEmpty">...</div>

2）擺脫觀察者，並isEmpty和一切與之相關的。然後在您的index.html中使用該指令，使用ng-show：ng-show="Notes.length >0"

來源

2015-11-08 16:36:29

完美!!，這對我很有用！非常感謝：） – Frankistan

NG-顯示不指示工作

回答

相關問題