I have a function defined in my root scope:
app.run(
function($rootScope, $location) {
// ...
$rootScope.goToPage = function(view) {
$location.path("/" + view);
console.log("go('"+view+"')");
}
// ...
}
);
I use it like that in my views:
<a href="" ng-click="goToPage('myPage')">My page</a>
It works.
Now, I'm loading some html parts from a REST service, and I need to compile them in order to execute angular code and directives.
This is the directive which compiles them:
app.directive('initBind', function($compile, $rootScope) {
return {
restrict: 'A',
link : function (scope, element, attr) {
attr.$observe('ngBindHtml',function(){
if(attr.ngBindHtml){
$compile(element[0].children)(scope);
}
})
}
};
})
And I use it like that:
<div ng-bind-html="htmlToBind" init-bind>
</div>
Note: htmlToBind
has been pre-processed by $sce.trustAsHtml
.
Directives inside htmlToBind
work, but if I place an a
tag with ng-click="goToPage('anotherPage')"
it doesn't work. I mean, the page gets refreshed instead of executing the function, and nothing is logged to the console.
It seems that goToPage
isn't defined in the $compile
scope, but I also tried passing $rootScope
(which has the function for sure) without success.
What am I missing?