1

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?

BackSlash
  • 21,927
  • 22
  • 96
  • 136
  • Have you taken a look at [this question](https://stackoverflow.com/questions/17417607/angular-ng-bind-html-and-directive-within-it)? Looks like you can use the suggested custom directive to compile your html without the need for `$sce.trustAsHtml`. – Alex K Aug 12 '17 at 18:41

0 Answers0