角鏈指令/從常量生成HTML

Question

我想鏈接角度在一起的指令。我想要做的是在指令中生成以下html。

<div id="menu-brunch" class="tab-pane"> 
    <div ng-init="init('brunch');" ng-controller="controllers.MenuController"> 
     <div ng-repeat="item in menuItems"> 
      <h3>{{item.name}}</h3> 
      <p>{{item.description}}</p> 
      <menuitems model="item.items" ></menuitems> 
     </div> 
    </div> 
</div> 

菜單項工作，但無論我怎麼努力，我不能創建一個「雙」指令。我們的目標是創建另一個指令menu將輸出上面的HTML，例如：

<menu model='brunch'> 

我的嘗試：

angular.module('leanwxApp.directives', []). 
directive('menu',()-> 
     template : " 
      <div id='tab-{{model}}' class='tab-pane'> 
<div ng-init=\"init('{{model}}');\" ng-controller='MenuController'> 
         <div ng-repeat='item in menuItems'> 
          <h3>{{item.name}}</h3> 
          <p>{{item.description}}</p> 
          <menuitems model='item.items' ></menuitems> 
         </div> 
      </div> 
     ", 
     restrict: 'E', 
     replace: true, 
     scope : { 
     'model' : '=model' 
     }, 
).directive('menuitems',()-> 
     template : " 
        <ul class='media-list'> 
        <li ng-repeat=\"item in model\"> 
         <div class='pull-right'>{{item.price}}</div> 
         <div class=\"media-body\"> 
          <h4 class=\"media-heading\">{{item.name}}</h4> 
          <p ng-bind-html-unsafe=\"item.description\"></p> 
         </div> 
        </li> 
       </ul> 
     ", 
     restrict: 'E', 
     replace: true, 
     scope : { 
     'model' : '=model' 
     }, 
); 

，但它只是產生什麼......建議？作爲一個方面說明，我的「MenuController」執行一個JSON請求，其中設置了init('<category>')。例如/menu/<category>.json。小提琴顯示問題http://jsfiddle.net/ncapito/ALWQe/

Answer 1

下面是你在找什麼工作示例：

var app = angular.module('test', []); 

app.factory('TestXXX', function() { 
    return { 
     test: function() { alert('load data here'); } 
    }; 
}); 

app.directive('menu', function() { 
    return { 
     restrict: 'E', 
     template: '<div id="menu-{{which}}" class="tab-pane">' + 
     ' <div>' + 
      '  <div ng-repeat="item in menu.items">' + 
      '   <h3>{{menu.name}}</h3>' + 
      '   <p>{{menu.description}}</p>' + 
      '   <menuitems model="menu.items" ></menuitems>' + 
      '   </div>' + 
      '  </div>' + 
      '</div>', 
     replace: true, 
     scope: { 
      which: '@' 
     }, 
     controller: function ($scope, TestXXX) { 
      TestXXX.test(); 
      $scope.$watch('which', function (which) { 
       $scope.menu = { 
        'name': which + ' Menu', 
         'description': which + ' Description', 
        items: [{ 
         'name': which + ' Item', 
          'description': which + ' Item Description', 
          'price': '1.99' 
        }] 
       }; 
      }); 
     } 
    }; 
}); 

app.directive('menuitems', function() { 
    return { 
     template: "<ul class='media-list'><li ng-repeat=\"item in model\">      <div class='pull-right'>{{item.price}}</div><div class=\"media-body\">      <h4 class=\"media-heading\">{{item.name}}</h4><p ng-bind-html-unsafe=\"item.description\"></p></div></li></ul>", 
     restrict: 'E', 
     replace: true, 
     scope: { 
      'model': '=model' 
     } 
    }; 
}); 

app.controller('MenuController', function ($scope) { 
    $scope.loadMenu = function (which) { 

    }; 


    $scope.menuItems = { 
     'name': 'test', 
      'description': 'description', 
     items: [{ 
      'name': 'test 1', 
       'description': 'item description', 
       'price': '1.99' 
     }, { 
      'name': 'test 2', 
       'description': 'item description', 
       'price': '2.99' 
     }] 
    }; 
}); 

搗鼓你提供

http://jsfiddle.net/ALWQe/5/

HTML

<div ng-app="test" ng-controller="MenuController"> 
    <menu which="Brunch"></menu> 
    <menu which="Lunch"></menu> 
    <menu which="Dinner"></menu> 
</div> 

的JavaScript

有一些問題。描述你的目標而不是描述你想要用AngularJS框架做什麼可能會更好。我不認爲這是一個好的主意，用於從服務器加載數據的指令（我的假設是基於閱讀你的問題），但是如果沒有更好的理解你要做什麼，我不能給出更好的建議，那。

這裏有一些事情開始不對您的做法破敗：

1. 你不想在一個指令的模板指定ng-controller（您menu指令有ng-controller="MenuController"）。這會將您的指令緊密地耦合到您的控制器（您不想做的事），並且導致Angular將其實例化兩次。指令可以擁有自己的控制器，並且應該在這種情況下使用。
2. 您有<menu model="test">這是告訴Angular尋找$scope中不存在的名爲test的房產。我不完全確定你要在這裏做什麼，所以再次，我不能在沒有做出假設的情況下就什麼是最好的建議。
3. 最後，他們沒有傷害任何東西，但是你不需要那些在MenuController和$scope.init中的返回語句。 JavaScript函數可以簡單地作爲「子」例程而沒有任何回報。