Question

我们有动物表的成像。每行描述一只动物，例如：ID，NAME，TYPE。

根据所选的行类型，我希望show是与该动物相关的侧边栏内容和一些用户操作。

内容完全不同，它来自不同API的数据。但是侧边栏总是放在相同的位置，相同的尺寸和样式。

也许我会为每个控制器执行常见操作，例如 - ＆gt;关闭边栏。

如果侧栏已经打开并且用户切换到另一侧，则侧栏应立即更改。

我应该如何使用angular设计此类登录？

我有一个想法是在html中为侧边栏定义一个指令。并为所选行设置监听器，然后为所选行编译动态侧栏指令，并插入父（侧）侧栏。也许我还需要处理前一个的破坏。

我很感激，如果有人能说出来的话，我会采取正确的方式......或者我应该改变什么？

Answer 1

  function dtSidebarDirective($compile, $mdUtil, $mdSidenav, $log, mxRegistry) {
return {
  restrict: 'E',
  templateUrl: 'app/components/sidebar/sidebar.html',
  controller: function($scope) {

    // used to replace sidebar data on the fly without recompile
    $scope.refresh = function() { }

    $scope.close = function(ev) {
      $mdSidenav('right').close()
    }
  },
  scope: true,
  link: link
};

function link(scope, element) {

  // used to detect switching between the same type of elements
  var _activeType;

  var _childDirective;
  var _childScope;
  var _childElement;

  var _toggle = $mdUtil.debounce(function() {
    $mdSidenav('right')
      .toggle()
      .then(function() {

        scope.isOpen = $mdSidenav('right').isOpen();
        $log.debug('toggle right is done');
      });
  });

  var _init = function(type, data) {

    // by default open diagram sidebar
    switch(type) {
      case 'shape':
        _childDirective = $compile('<dt-dog-sidebar></dt-dog-sidebar>');
        break;
      case 'text':
        _childDirective = $compile('<dt-cat-sidebar></dt-cat-sidebar>');
        break;
      default:
        _childDirective = $compile('<dt-animal-sidebar></dt-diagram-sidebar>');
    }

    // initialize child sidebar : element & scope
    _activeType = type;
    _childScope = scope.$new();
    _childScope.data = data;

    _childElement = _childDirective(_childScope);
    element.find('md-sidenav').append(_childElement);
  };

  var _isInitialized = function(type) {
    var isDefined = angular.isDefined(_childDirective);
    return type ? _activeType == type && isDefined : isDefined;
  };

  var _destroy = function() {
    if(_isInitialized()) {
      _childScope.$destroy();
      _childElement.empty();
      _childElement.remove();
    }
  };

  function showSidebar(ev, type, data) {
    // lets figure out does we open the same kind of sidebar
    if(_isInitialized(type)) {
      _childScope.data = data;
      _childScope.refresh();
      return;
    }

    // destroy since we gonna replace with new sidebar
    _destroy();
    _init(type, data);
  }

  function toggle() {
    update();
    _toggle();
  }

  function update(ev) {
    // detect which sidebar should be shown now
  }

  scope.$on('sidebar:toggle', toggle);
  scope.$on('sidebar:show', showSidebar);
  scope.$on('sidebar:update', update);
}

我设法让每次我需要重新编译时都应该使用不同的侧边栏或调用子视图的刷新范围。

如何根据同一侧栏中的选定元素处理不同的内容

1 个答案: