The title is a bit of a mouthful but there is my current situation:
I have a directive (D1) that is plain markup for a modal popup that I have in the root. I have a directive (D2) that is in a controller's scope (C1). I would like for D2 to set the contents inside of the modal, D1. I have a service (S1) that is injected into C1 that pulls data from the network that I'd like to ultimately inject into D1.
D1 would be as follows (plain markup for a modal):
D1 would be as follows after S1 in C1 returns data to D2 to populate D1. D2 would be responsible for defining model data in D1, such as the {{title}}.
The idea is to have a generic, decoupled modal (D1) that can be defined/populated through another directive (D2).
I am having a hard time implementing this functionality. Bonus points, I'd like to have D1 to have an API that I could call to populate the modal with different elements such as checkboxes, input, text. This would be different than just building the markup outside of D1 and then completely injecting it into D1.
The code basics are:
myApp.controller('C1', function(S1){
var results = S1.query();
// populate D1 attributes with results from S1? or a getter function in the controller to returns results to D1.
}
myApp.directive('D1', function() {
var createCheckBox = function( name ){ // one of many different element available exposed through D1's API.
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = name;
return checkbox;
}
return{
restrict: "E",
templateUrl: '/path/to/my/modal.html',
controller: function( $scope ){ // hopefully this would be D1's API
$scope.modalContent = [];
this.addCheckBox = function( checkboxName ){
$scope.push( this.createCheckBox( checkboxName ) );
}
}
link: function( scope, element, attrs ){
// set up events on the modal (such as closing it)
}
}
} // end of D1
myApp.directive('D2', function() {
return{
restrict: "A",
require: 'D1', // <-- do not think this is possible with my setup.
link: function( scope, element, attrs ){
element.bind( 'click', function(){
// loop through data returned by service
D1.addCheckBox(/* checkbox's name */ );
// end loop
});
}
}
}// end of D2
HTML Markup
<div ng-controller="root">
<div ng-controller="C1">
<span D2></span>
</div>
<D1></D1>
</div>
Thank you for following this far!
TL;DR: Look for another question to help out with
