I recently encountered a challenge with a $ionicModal containing a directive called <scrap-link-cards>, which accepts a two-way binding scope object. This directive is included in the $ionicModal template:
<scrap-link-cards datasource=(updates.update_links)> </scrap-link-cards>
Below is the complete directive code:
.directive('scrapLinkCards', function ($log) {
var controller = function ($scope) {
$scope.links = angular.copy($scope.datasource); //undefined
$scope.LastIndex = $scope.links.length - 1;
};
var templateUrl ='/path/to/template' ;
return{
restrict :'E',
controller: controller,
scope: {
datasource :'='
},
templateUrl : templateUrl
}
})
Here is the template for the templateUrl:
<div class="scrapLinks">
<h3>{{links[LastIndex].title}}</h3>
<p>{{links[LastIndex].description}}</p>
</div>
It is important to note that this code is within a $ionicModal:
$ionicModal.fromTemplateUrl('path/to/template/html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function ($ionicModal) {
$scope.ReadMore = $ionicModal;
});
The issue I am facing is that, due to being inside a $ionicModal, the HTML is compiled before Angular can access (updates.updates_links), resulting in an undefined object at $scope.links. I have attempted to use the link function of the directive and move all the logic there, but it seems like $ionicModal templates are compiled before the controller is loaded. Is there a way to work around this?