I am facing an issue with one parent directive and multiple child directives.
My requirement is to nest one directive inside another, resulting in the use of multiple directives.
Could someone assist me in identifying any errors in this code or provide examples that meet our requirements?
JS Fiddle Link : http://jsfiddle.net/Lcch85a1/
Angular JS Directive Code
bosAppModule.directive('layoutView',function($compile){
var layoutObj={};
linkFn=function(scope, element, attributes, controller) {
console.log("Layout : ");
console.log(scope.layoutData);
$compile(element.contents())(scope);
//var containerString = "<layoutContainerView layout-data='layoutObject.Data' container-data='containers' ng-repeat='containers in layoutData.collections.container.rowSet'>Hello container {{containers.containerId}} </layoutContainerView>";
//var compiledElement = $compile(containerString)(scope);
//element.append(compiledElement);
};
layoutObj.scope={layoutData:'='};
//layoutObj.transclude='true';
layoutObj.restrict='E';
//layoutContainerObj.replace='true';
layoutObj.template="<div id='{{layoutData.collections.layout.rowSet[0].layoutId}}' layout-data='layoutObject.Data'>Hello layout {{layoutData.collections.layout.rowSet[0].layoutId}}</div>";
layoutObj.link = linkFn;
return layoutObj;
});
bosAppModule.directive('containerView',function($compile){
var layoutContainerObj={};
linkFn=function(scope, element, attributes, controller) {
$compile(element.contents())(scope);
console.log("Container : ");
console.log(scope.layoutData);
console.log(scope.containerData);
};
layoutContainerObj.scope={layoutData:'='};
//layoutContainerObj.transclude='true';
layoutContainerObj.restrict='E';
//layoutContainerObj.replace='true';
layoutContainerObj.template="<div >Hello container {{containers.containerId}} </div>";
layoutContainerObj.link = linkFn;
return layoutContainerObj;
});
HTML Source Code:
<layout-view layout-data='layoutObject.Data'>
<container-view layout-data='layoutObject.Data' ng-repeat='containers in layoutObject.Data.collections.container.rowSet'></container-view>
</layout-view>