AngularJSスライダダウンメニューを作成

Question

私はAngularJSアプリケーションを構築していますが、基本的に私のページの上にメニューがあり、アイテムを選択するとページの一部のコンテンツがスライドされ、そのエリアにメニューが表示されます。私はディレクティブを作成することについて何かを読んだことがありますが、どうすればそれを行うことができるのかはまだ分かりません。私はメニューから項目を選択すると、静的な画像disapears、その後

と「サブメニュー」とサブメニューの内容自体に場所を与える：私は私のページの例を示しています。 「サブメニュー」+「コンテンツ」の高さは、画像の高さ、次に大きいいくつかのケースでは

は、コンテンツの残りの部分が下にスライドします。

私の主な関心事は、選択したメニュー（黒い四角形内）によってこのサブメニューを表示する方法です。私の考えは、いくつかのメニューテンプレート（すべてのhtmlとcssが作成された状態）を作成し、次にこのテンプレートに別のコンテンツをバインドして、必要なdivに表示することでした（この場合は静的イメージで始まるdiv）。しかし、AngularJSは私には新しいものなので、私はそれを細分化するためにいくつか問題があります。あなたはここに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 
    }; 
}); 

あなたはディレクティブにこのイベントを通信することができます。角度イベントを介して、それは彼がサービスからコテネントを再読み込みするように。私は一般的なメニューとサービスを表示するディレクティブを作成することをお勧めしたい

$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); }); 
});