Thank you for taking a look. Let's get right into it:
A JSON object contains HTML links with ng-click attributes, using ng-bind-html, and securing the HTML with $sce's trustAsHtml. Additionally, I've implemented a custom angular-compile directive to compile the angular click listener into the app after loading the json in a $q promise.
Everything seems to be working as expected at first glance...
JSON
{
"text" : "Sample text with <a data-ng-click=\"__services._animation.openModal('g');\">modal trigger</a>?"
}
VIEW
<p data-ng-bind-html="__services.trustAsHTML(__data.steps[step.text])"
data-angular-compile></p>
DIRECTIVE
angular.module('app.directives.AngularCompile', [], ["$compileProvider", function($compileProvider) {
$compileProvider.directive('angularCompile', ["$compile", function($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.angularCompile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};
}])
}]);
The Problem:
While it initially works fine, I encounter an issue when trying to replicate the same functionality in another view to track progress by applying ng-bind, trustAsHTML, angular-compile treatment to a sibling object.
Here's where the problem arises!
<p data-ng-bind-html="__services.trustAsHTML(__state.modal.text)"
data-angular-compile></p>
In the second view, which is a modal within the same scope ($rootScope) on the same page - the binding and trustAsHTML Angular functions are applied but the link is not clickable, and no class="ng-scope" is generated on the a tag.
If more information about my setup would help in understanding the issue, let me elaborate here. The initial setup of the app is handled by the concierge and it stores most data in $rootScope:
return angular
.module('app', [
'ngResource',
'ngSanitize',
'ui.router',
'oslerApp.controllers.GuideController',
'oslerApp.services.ConciergeService',
'oslerApp.services.DataService',
'oslerApp.services.LocationService',
'oslerApp.services.StatesService',
'oslerApp.directives.AngularCompile',
])
.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to landing
$urlRouterProvider.otherwise("/");
// Now set up the states
$stateProvider
.state('guide', {
url: "/guide",
templateUrl: "views/guide.html",
controller: 'GuideController as guide'
})
.state('contact', {
url: "/contact",
templateUrl: "views/contact.html"
})
})
.run(function(ConciergeService) {
ConciergeService.init();
});
I have spent 2 days restructuring my entire site to check if the issue stemmed from the modal being in its own directive, but even placing it within the same template and scope did not resolve the problem.