在单击干净的方式(创建类的实例)时向HTML注入HTML模板？

Question

在单击干净的方式(创建类的实例)时向HTML注入HTML模板？

chr*_*phe 8 coffeescript angularjs angularjs-directive angularjs-ng-repeat angularjs-ng-click

在我的AngularJS项目中,我有类似的东西(这是一个带有客户名称的下拉菜单.点击其中一个名称后,Scrum Card应该出现,并在卡中插入客户的名字.):

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

Run Code Online (Sandbox Code Playgroud)

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

所以,我考虑过在Coffeescript中创建一个Card Class,并在每次点击时创建一个实例.使用我的HTML模板/部分点击创建此类有什么好处？如何告诉Angular创建我的类卡的新实例？

(在此之前我创建了一个具有templateURL属性和我的部分的指令.但同样的问题:我想在ng-click上注入我的指令而不是通过在代码中包含我的指令手动... btw,我是一个Angular和CoffeeScript初学者...)

非常感谢你提前!

Answer 1

ksi*_*ons 14

在我看来,你应该做两件事.我很抱歉这是JS而不是CoffeeScript,但意图是一样的:

使用您在ng-click上调用的函数创建一个控制器.也许你已经有了这个(因为你没有显示addCard()的定义).此函数应将您的客户卡类的实例添加到绑定到$ scope的数组中.
如果显示其中一张卡片足够复杂,请制作一个新的自定义指令,用于显示卡片并在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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，1 月前
查看次数：	12758 次
最近记录：	10 年，1 月前