8

在我的AngularJS 项目中，我有这样的东西（它是一个带有客户姓名的下拉菜单。单击其中一个名称，应该会出现一个 Scrum 卡，其中客户的姓名插入到卡中。）：

<ul class="dropdown-menu red" >
    <li ng-repeat="customer in customers" ng-click="addCard()">
        // HERE GOES THE HTML CODE
    </li>
</ul>

我想完成每次点击都会插入一张卡片。现在的问题是，这张卡片有多行 HTML 代码。所以最好插入一个全新的模板。但是我不能用 ng-click 插入模板，对吧？除此之外，将 HTML 放在一个变量中并将其推送到这个列表是很脏的，不是吗？

所以，我想在 Coffeescript 中创建一个 Card 类，并在每次点击时创建一个实例。用我的 HTML 模板/部分点击创建这个类有什么好处？如何告诉 Angular 创建我的类 Card 的新实例？

（在此之前，我创建了一个指令，该指令具有我的部分模板URL属性。但同样的问题：我想在 ng-click 上注入我的指令，而不是通过在代码中包含我的指令来手动注入......顺便说一句，我是一个 Angular和 CoffeeScript 初学者 ...)

非常感谢您！

4

1 回答 1

14

在我看来，你应该做两件事。我很抱歉这是 JS 而不是 CoffeeScript，但目的是一样的：

  1. 使用您在 ng-click 上调用的函数创建一个控制器。也许您已经有了这个（因为您没有显示 addCard() 的定义位置）。此函数应将您的客户卡类的实例添加到绑定到 $scope 的数组中。
  2. 如果显示其中一张卡片足够复杂，请创建一个新的自定义指令来显示卡片并在 ng-repeat 中使用它。

例子：

   <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
        <script type="text/javascript">

        function Card() {
            this.name = 'Bob';
            this.phone = '1234567';
        }

        angular.module('myApp', []);

        angular.module('myApp').controller('CustomerCardController', function ($scope) {
            $scope.cards = [];

            $scope.addCard = function() {
                $scope.cards.push(new Card());
            };
        });

        angular.module('myApp').directive('myCard', function(){
            return {
                restrict: 'A',
                template: '<div>{{aCard.name}} {{aCard.phone}}</div>',
                replace: true,
                transclude: false,
                scope: {
                    aCard: '=myCard'
                }
            };
        });
        </script>
    </head>
    <body ng-app="myApp">
        <div ng-controller="CustomerCardController">
            <div ng-click="addCard()">Add new card</div>
            <div ng-repeat="card in cards" my-card="card"></div>
        </div>
    </body>
</html>
于 2013-10-06T17:01:21.153 回答