angularjs – 在单击干净的方式(创建类的实例)时将HTML模板注入D

发布时间：2020-12-17 07:31:06 所属栏目：安全来源：网络整理

导读：在我的AngularJS项目中,我有类似的东西(这是一个带有客户名称的下拉菜单.点击其中一个名称后,Scrum Card应该出现,并在卡中插入客户的名字.)： ul class="dropdown-menu red" li ng-repeat="customer in customers" ng-click="addCard()" // HERE GOES THE HT

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

<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 Class,并在每次点击时创建一个实例.使用我的HTML模板/部分点击创建此类有什么好处？如何告诉Angular创建我的类卡的新实例？

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

非常感谢你提前！

在我看来,你应该做两件事.我很抱歉这是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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!