1

我正在尝试以角度将指令链接在一起。我想要做的是在指令中生成以下 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”使用init('<category>')设置的任何内容执行 JSON 请求。例如/menu/<category>.json。小提琴显示问题http://jsfiddle.net/ncapito/ALWQe/

4

1 回答 1

1

这是您正在寻找的工作示例：

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

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

你提供的小提琴有一些问题。描述你的目标可能比描述你试图用 AngularJS 框架做什么更好。我认为从服务器加载数据的指令不是一个好主意（我的假设是基于阅读您的问题），但是如果没有更好地了解您的目标，我无法给出更好的建议那。

以下是您的方法最初存在的一些问题的概要：

  1. 您不想ng-controller在指令的模板中指定（您的menu指令有ng-controller="MenuController"）。这将您的指令与控制器紧密耦合（这是您不想做的事情），并导致 Angular 将其实例化两次。指令可以有自己的控制器，并且应该在这种情况下使用。
  2. 你有<menu model="test">which 告诉 Angular 寻找一个名为testin的属性$scope，该属性不存在。我不完全确定你在这里的目的是什么，所以再一次，如果不做假设，我真的不能就什么是最好的给你建议。
  3. 最后，它们并没有伤害任何东西，但是您不需要MenuControllerand中的那些 return 语句$scope.init。JavaScript 函数可以只是“子”例程而没有任何返回。
于 2013-05-22T03:50:01.700 回答