Lets say i have a customer model and i want to create different views of this model
e.g. one detail view:
and one showing only the picture and name:
Do i create multiple directives or do i create a view factory within a directive in this case?
The model i put in will always be a customer and the methods i call will also be the same.
Is there a good practice?
You could implement a "customer view" directive.
And controll its state by assigning different "showDetail" attribute. (I assume that your customer view only has two states)
This directive would being created like this
<customer-view customer-data="customer"></customer-view> <!-- Simple version -->
<customer-view customer-data="customer" show-detail="true"></customer-view> <!-- more detail -->
I wrote a simple example:
Solution1 APP.js
angular.module("myApp",[])
.controller("customerCtrl",function($scope){
$scope.customers = [{firstName:"Jimmy",lastName:"James",email:"[email protected]",phone:"000-00000-00"}];
})
.directive("customerView",function(){
return {
restrict:"E",
scope:{
showDetail:"@",
customerData:"="
},
link: function(scope,element,attrs){
},
template: '<div><img src=""/><div><span>{{customerData.firstName}} {{customerData.lastName}}</span><div ng-show="showDetail"><span>Tel:{{customerData.phone}}</span></div><div ng-show="showDetail"><span>mail:{{customerData.email}}</span></div>'
};
});
EDIT: If you don't want to use ng-show, you could try to identify the value of 'showDetial' attribute and assign different template to directive element in link function:
Solution 2 app.js
angular.module("myApp",[])
.controller("customerCtrl",function($scope){
$scope.customers = [{firstName:"Jimmy",lastName:"James",email:"[email protected]",phone:"000-00000-00"}];
})
.directive("customerView",function($compile){
return {
restrict:"E",
scope:{
showDetail:"@",
customerData:"="
},
link: function(scope,element,attrs){
var showDetail = attrs.showDetail || false;
var temp1 = '<div><img src=""/><div><span>{{customerData.firstName}} {{customerData.lastName}}</span></div><div><span>Tel:{{customerData.phone}}</span></div><div><span>mail:{{customerData.email}}</span></div></div>';
var temp2 = '<div><img src=""/><div><span>{{customerData.firstName}} {{customerData.lastName}}</span></div></div>';
var el = showDetail?$compile(temp1)(scope):$compile(temp2)(scope);
element.append(el);
}
};
});
main.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="customerCtrl">
<h1>Simple</h1>
<div ng-repeat="customer in customers">
<customer-view customer-data="customer"></customer-view>
</div>
<h1>More detail</h1>
<div ng-repeat="customer in customers">
<customer-view customer-data="customer" show-detail="true"></customer-view>
</div>
</body>
</html>
The controller will maintain the customers model and pass the customer model to directive when you use ng-repaet to render all users.
Snapshot
Hope this is helpful for you.
show-detail But putting in the ng-show directive was the thing i want to avoid by creating a view factory because it will spread around in more advanced views