Menu
In my AngularJS project I have something like this (it's a dropdown menu with customer names. With a click on one of the names a Scrum Card should appear with the customer's names inserted in the card.):
<ul class="dropdown-menu red" >
<li ng-repeat="customer in customers" ng-click="addCard()">
// HERE GOES THE HTML CODE
</li>
</ul>
I want to accomplish that a card will be inserted on every click. Now the problem is, that this card has multiple lines of HTML code. So it would be better to insert a whole new template. But I can't insert a template with ng-click, right? Besides that, to put the HTML in a variable and push it to this list is quite dirty, isn't it?
So, I thought about creating a Card Class in Coffeescript and create an instance on every click. What would be good practive to create this class on click with my HTML template/partial? How do I tell Angular to create a new instance of my class Card?
(Before that I created a Directive that had the templateURL attribute with my partial. But the same problem: I want to inject my directive on ng-click and not manually by including my directive in the code ... btw, I am an Angular and CoffeeScript beginner ...)
Thank you very much in advance!
622
You should, in my opinion, do two things. My apologies that this is JS and not CoffeeScript, but the intention is the same:
Example:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
