AngularJS는 슬라이드 다운 메뉴를 만듭니다.

Question

저는 AngularJS 앱을 제작하고 있습니다. 기본적으로 내 페이지 상단에 메뉴가 있습니다. 항목을 선택하면 내 페이지의 일부 콘텐츠가 아래로 미끄러 져 그 영역의 메뉴가 표시됩니다. 나는 지시어를 만드는 것에 관해 뭔가 읽었지 만 어떻게 할 수 있는지 아직 명확하지 않습니다. 내 페이지의 예를 보여

그리고 나는 메뉴, 정적 이미지 disapears에서 항목을 선택하고 "하위 메뉴"및 서브 메뉴 콘텐츠 자체에 장소를 제공합니다. 은 "하위 메뉴"+ "콘텐츠"높이가 이미지의 높이 후 더 큰 경우에

는 내용의 나머지는 아래로 슬라이드합니다.

내가 가장 염려하는 점은 선택한 메뉴 (검은 색 사각형)에 따라이 하위 메뉴를 표시하는 방법입니다. 내 생각은 모든 HTML 및 CSS 생성 된 메뉴 템플릿을 만든 다음이 템플릿에 다른 콘텐츠를 바인딩하고 원하는 div (이 경우 정적 이미지로 시작한 div)에 표시하는 것입니다. 그러나 AngularJS가 나에게 새로운 것이기 때문에 나는 그것을 pratice에 넣기위한 몇 가지 문제가 있습니다. 당신은 여기 plunker 예를 볼 수 있습니다

Answer 1

: 여기

https://plnkr.co/edit/xJoF4IuDtJlGzWmTYoqZ?p=preview

그리고는 각 코드의 설명입니다

angular.module('plunker', []); 

function MainCtrl($scope, menuSvc) { 
    // main controller sets the menu contents to the service 
    menuSvc.putAll([{t:"item1"},{t:"item2"}]); 
} 


// a very simple menu service that keeps an object of menu items 
angular.module('plunker').factory("menuSvc", [ function() { 
    var items; 

    var clear = function(){ 
     items = {}; 
    }; 

    var getAll = function(){ 
     return Object.keys(items); 
    }; 

    var put = function(item){ 
     items[item.t] = item; 
    }; 

    var putAll = function(itemArray, dontClean){ 
     if(!dontClean){ 
      clear(); 
     } 
     itemArray.forEach(
      function(i){ 
       put(i); 
      } 
     ); 
    }; 

    clear(); 
    return { 
     put: put, 
     getAll: getAll, 
     putAll: putAll, 
     clear: clear 
    }; 
}]); 


// directive that gets its content from the service 
angular.module('plunker').directive('menu', function(){ 

    return { 
    restrict: 'E', 
    scope: { 
    }, 

    templateUrl: 'menu.html', 

    controller: function($scope, menuSvc) { 
     $scope.menu = menuSvc.getAll(); 
    }, 

    replace: true 
    }; 
}); 

메뉴의 내용은이 지침에이 이벤트를 통신 할 수있다 업데이트 될 때 각도 이벤트를 통해 서비스를 다시 읽게됩니다. 메뉴 컨트롤러에서 $ 방송, $ 방출에 $ 청취자의

예 (https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope)를 참조하십시오 :

이

$scope.$on('someEvent', function(){ 
    // update menu content 
    // trick is that you have to update the menu content, not to overwrite it 
    // for example like this: 
    $scope.menu.length = 0; 
    var newValues = menuSvc.getAll(); 
    newValue.forEach(function(x){ $scope.menu.push(x); }); 
});