<dl> に <dt> と <dd> を入力する例を次に示します ...
ステップ 01 - widge.product.details.js を作成する
// $scope.details = [] //配列オブジェクトにバインド
angular.module('widget.product.details',[])
.directive('productDetails',function(){
return {
template:'<dl class="dl-horizontal"></dl>',
replace:true,
restrict:'E',
compile : function compile(tElement, tAttrs, transclude) {
return {
post: createProductDetails
}
}
}
});
var createProductDetails = function (scope, iElement, iAttrs, controller) {
scope.$watch('details', function(newVal, oldVal) {
angular.forEach(newVal, function(v,k){
iElement.append( angular.element('<dt>'+v.dt+'</dt><dd>'+v.dd+'</dd>') );
});
});
}
ステップ 02 - HTML を作成する
<div class="span7" ng-controller="ProductInfoCtrl">
<product-details></product-details>
</div>
ステップ 03 - app.product.js を作成する
function ProductInfoCtrl($scope) {
$scope.details = [
{dt:'condition',dd:'brand new'},
{dt:'year bought',dd:'3 years ago'},
]
}