AngularJS將html附加到dom元素

Question

我正在開發一個小型Web應用程序，並且其中有一個包含導航鏈接的側邊菜單。 單擊每個鏈接都會拉出一個隱藏的面板，並應顯示該鏈接特定的項目列表。

除了Im堅持如何將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>

這只是一個想法，您可以使用角度動畫為邊欄滑動和填充動畫。

Answer 2

您在錯誤的元素上指定了ng-transclude指令。 您將其放置在span標簽上。 嘗試這樣的事情：

<div>
  <span>/*My template html here*/</span>
  <div ng-transclude></div>
</div>

看起來您指定的指令不正確。 嘗試這個：

configApp.directive('menuList', function () {
  return {
    restrict: 'A',    
    replace: true, // note: this syntax will soon be deprecated
    template: '<see above snippet>'
  };
});

特別地，請注意restrict ，它指定如何使用此偽指令（html元素上的A：屬性，E：作為元素本身，C：作為類）。 在這里，我們要說的是要使用指令作為元素E 另外，請注意，我使用的名稱是menuList而不是menu-list 。 AngularJS在指令定義中使用駝峰式大小寫，並將在html中找到的指令名稱映射到其駝峰式大小寫中。 因此，在html中，我們仍將使用以下指令： menu-list ，但將使用camel-case進行聲明。 希望這可以幫助！