AngularJS create slidedown menu

Question

Я создаю приложение AngularJS, и в основном у меня есть меню поверх моей страницы, тогда, когда я выбираю элемент, вы должны скользить по некоторому содержимому моей страницы и показывать меню в этой области. Я кое-что прочитал о создании директивы, но мне все еще не ясно, как я могу это сделать. Я показываю пример моей страницы:

Затем, когда я выбираю пункт из меню, статического disapears изображения и даю место в «подменит» и само содержание подменит.

В некоторых случаях, когда + «Содержание» высота «SubMenu» больше, то высоту изображения, остальная часть контента будет скользить вниз.

Моя основная проблема заключается в том, как показать этот SubMenu в зависимости от выбранного меню (на черном квадрате). Моя идея состояла в том, чтобы создать некоторый шаблон меню (со всеми созданными html и css), а затем просто привязать к нему этот контент и показать его в div, который я хочу (в этом случае div, который начинался со статического изображения). Но поскольку AngularJS для меня новичок, у меня возникают некоторые проблемы, чтобы привести его в порядок.

Answer 1

Вы можете увидеть plunker пример здесь:

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