AngularJs隱藏特定路徑/控制器

div元素，我有以下結構：AngularJs隱藏特定路徑/控制器

<html> 
<head> 
     // additional info here 
</head> 

<body data-ng-app="myApp" data-ng-controller="contentController"> 
     <div id="container"> 

      <div id="id1"> 
       //content here 
      </div> 

      <div id="id2"> 
       //content here 
      </div> 

      <div id="id3"> 
       //content here 
      </div> 

      <div id="page-content"> 
       <div data-ng-view=""> 
        //here will be loaded the other views 
        //Example: /profile, /login, /register, etc etc) 
       </div> 
      </div> 

     </div> 
</body> 
</html>

我需要的是隱藏divs: id1, id2, id3當用戶導航到像/登錄或註冊的特定頁面。對於所有其他頁面，divs: id1, id2, id3應該是可見的。

當用戶導航到/login時，divs: id1, id2, id3內容與登錄表單一起顯示，因此我必須以某種方式隱藏它。

divs: id1, id2, id3對於除/login,/register和/forgot之外的所有頁面都是常見的。

來源

2014-11-01 David Dury

您可以使用從$ rootScope播出的$locationChangeSuccess事件來檢查當前使用$route服務的路線。這種方法的優點是，仍然可以檢測到通過使用地址欄的導航。

DEMO

JAVASCRIPT

.controller('contentController', function($scope, $rootScope, $route) { 

    var paths = ['/login', '/register', '/forgot']; 

    $rootScope.$on('$locationChangeSuccess', function() { 

     var $$route = $route.current.$$route; 
     $scope.contentVisibility = $$route && paths.indexOf($$route.originalPath) < 0; 

    }); 

    });

HTML

<body data-ng-app="myApp" data-ng-controller="contentController"> 
    <div id="container"> 
     <div id="id1" ng-show="contentVisibility"> 
       //content here 
      </div> 
     <div id="id2" ng-show="contentVisibility"> 
       //content here 
      </div> 
     <div id="id3" ng-show="contentVisibility"> 
       //content here 
     </div> 
     <div id="page-content"> 
     <div data-ng-view=""> 
      //here will be loaded the other views 
      //Example: /profile, /login, /register, etc etc) 
     </div> 
     </div> 

     <!-- list of routes bound within the anchor tags --> 
     <a ng-repeat="path in [ 
      '/login', '/register', '/forgot', 
      '/other-route-1', '/other-route-2', '/other-route-3']" 
      ng-href="#{{path}}">{{path}}<br></a> 

    </div> 
    </body>

來源

2014-11-01 06:49:08 ryeballar

您應該使用data-ng-hide隱藏您的內容。但是，您必須在特定控制器的開始處設置變量以隱藏內容，而在其他控制器中，您應該將其設置爲false以顯示內容。

在特定控制器的開頭：

var $scope.contentHide = true;

在其他控制器的開頭：

var $scope.contentHide = false; 

<div id="id1" data-ng-hide="contentHide"> 
       //content here 
</div> 

<div id="id2" data-ng-hide="contentHide"> 
       //content here 
</div> 

<div id="id3" data-ng-hide="contentHide"> 
       //content here 
</div>

來源

2014-11-01 05:44:29

因此，這意味着我不需要驗證或至少護理的url位置或做一個檢查什麼是當前的網址，如：$ scope.contentHide = $ location.path（）==='/ login''對不對？ – 2014-11-01 05:50:40

不，你不需要這個 – 2014-11-01 05:52:50

還有一個問題，關於控制器，你可以在上面的html中看到，當我進入/登錄登錄視圖時，將加載到'data-ng-view'內，控制器用於/ login在登錄視圖中聲明。該屬性是否適用於div'data-ng-view'上面的元素？ – 2014-11-01 05:54:29

AngularJs隱藏特定路徑/控制器

回答

相關問題