在我的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>
