Here is a directive implementation:
<some-directive key="123"></some-directive>
This directive code looks like this:
angular.module('app').directive('someDirective', ['someFactory', '$compile', '$timeout', function(PatientFactory, $compile, $timeout){
return {
scope: {
customer: "="
},
controller: _controller,
templateUrl: 'components/sometemplate.html',
link: function (scope, element, attrs) {
}
};
There is another directive based on the key attribute. It retrieves the customer data, sets it as an attribute, then recompiles but encounters issues.
angular.module('app').directive('key', ['someFactory', '$compile', '$timeout', function(PatientFactory, $compile, $timeout){
return{
link: function(scope, el, attr){
//if key is provided, fetch the customer based on the key.
if (attr.key) {
scope.someFactory.getCustomerByKey(attr.key).then(function (res) {
el.attr('customer', res);
var fn = $compile(el);
return function(scope){
fn(scope);
};
});
}else{
//error
}
}
The customer data appears to update in the $parent scope according to the dev console, but the view displays {{customer}} instead of the actual customer details.