I am encountering an issue with a directive that calls another directive with object values. The problem arises when the template is compiled before the promise fetching the data is fulfilled.
Here is the directive:
var directives = angular.module('app.directives', []);
directives.directive('mydirective', function (myService, $http, $compile) {
var templateUrl = "/some/file.html";
return {
restrict: "AE",
scope: {
entry: "="
},
link: function (scope, element, attrs) {
var entry = scope.entry;
var template = {
//** some empty key - value pairs **//
};
$http.get(templateUrl).then(function (response) {
element.html(response);
myService(entry.id, function (err, res) {
if (err)
throw err;
//** code to fill the template object **//
scope.seqplot = template;
$compile(element.contents())(scope);
});
});
}
};
});
The template (the seqplot directive can be accessed here):
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Some header
</h3>
</div>
<div class="panel-body">
<div class="row" ng-repeat="x in seqplot.k2 track by $index">
{{$index}}
<div class="col-md-4">
{{seqplot.k1[$index]}}
</div>
<div class="col-md-8">
<seqplot data-bar-width="666"
data-region-data="seqplot.k3"
data-regions='seqplot.k2[$index]'
data-seq="{{seqplot.k4}}"
data-gradient="true"></seqplot>
</div>
</div>
</div>
</div>
The partial where I call the directive:
<div>
<h1 class="page-header">{{entry.name| uppercase}} <small> - {{entry.uniprot_id| uppercase}}</small> </h1>
<div mydirective data-entry="entry"></div>
</div>
And the controller:
var ctrlEntry = controllers.controller('ctrlEntry', function ($scope, $location, $rootScope) {
var getEntry = function (obj_arr, id) {
for (var i = 0; i < obj_arr.length; i++) {
var curr = obj_arr[i];
if (curr.id === id) {
return curr;
}
}
};
var data = $rootScope.data;
var path = $location.path().split('/');
var entry_id = path[path.length - 1];
$scope.entry = getEntry(data, entry_id);
});
The issue arises because the scope.seqplot object from mydirective is passed to the seqplot directive before the myService callback is executed. I suspect there is a need to recompile the html template right after the service callback is executed or make the directive wait to compile the template until the service callback is fully executed. Any suggestions? Thank you.