javascript - AngularJS 将 html 附加到 dom 元素

Question

我正在开发一个小型网络应用程序，并且有一个侧面菜单，其中包含导航链接。单击每个链接时都会拉出一个隐藏面板，并应显示特定于该链接的项目列表。

我可以使用大部分功能，但我一直不知道如何将 templateURL 或仅 html 附加到面板。

任何指导都会很棒。

这是我到目前为止所拥有的:html

<!-- Pullout menu -->
 <nav id="sidebar-pullout">
   <div id="menu-list"></div>
</nav>

app.js

var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap'])

.config(function($routeProvider){
   $routeProvider..when('/organizations', {
        templateUrl: 'templates/dashboard/organizations/organizations-title.html',
        controller: 'OrganizationController',
        activetab: 'organizations'
    })
      .otherwise( {redirectTo: '/dashboard'} );
  });

// Side Nav Link Controllers
   configApp.controller('OrganizationController', function($scope) {});
   configApp.controller('SideNavCtrl', function($scope, $location) {
  $scope.isActive = function(route) {
    return route === $location.path();
  }
 });

 // adding html to the menu-list
 configApp.directive('menu-list', function(){
  return {
    template: '<span ng-transclude >append som html here</span>',
    replace: true,
    transclude: true,
    controller: 'OrganizationController'
  };
 });

Answer 1

这是您可以采取的另一种方法。通过保留对菜单项和内容的引用。您可以将侧面板内容保存在单独的 HTML 文件中。

configApp.directive('menuList', function() {
  return {
    restrict: 'EA',
    link: function(scope, el, attr) {

        var activeId = null;

        scope.showContent = function(id) {
            activeId = id;
        };

        scope.isActive = function(id) {
            return activeId === id;
        }

        scope.menuItems = [{
            id: 'item1',
            name: 'Menu Item 1',
            content: 'path/to/menuItem1content.html'
        }, {
            id: 'item2',
            name: 'Menu Item 2',
            content: 'path/to/menuItem2content.html'
        }]
    }
  };
}); 

然后在你的 HTML 中可能是这样的。

<div menuList>
  <nav id="sidebar-menu">
    <ul>
        <li ng-repeat="item in menuItems">
            <a ng-click="showContent(item.id)">{{ item.name }}</a>
        </li>
    </ul>
  </nav>

  <div id="sidebar-content">
    <div class="content"
         ng-repeat="item in menuItems"
         ng-include="item.content"
         ng-show="isActive(item.id)"></div>
  </div> 
</div>

这只是一个想法，您可以使用 Angular 动画来制作侧边栏滑动和其他内容的动画。