gpt4 book ai didi

angularjs - 单击干净的方式将 HTML 模板注入(inject) DOM(创建类的实例)?

转载 作者:行者123 更新时间:2023-12-04 05:51:56 27 4
gpt4 key购买 nike

在我的 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 上注入(inject)我的指令,而不是通过在代码中包含我的指令来手动注入(inject)......顺便说一句,我是一个 Angular和 CoffeeScript 初学者 ...)

非常感谢您!

最佳答案

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

  • 使用您在 ng-click 上调用的函数创建一个 Controller 。也许您已经有了这个(因为您没有显示 addCard() 的定义位置)。此函数应将您的客户卡类的实例添加到绑定(bind)到 $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>

    关于angularjs - 单击干净的方式将 HTML 模板注入(inject) DOM(创建类的实例)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19210887/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com