Hello Serhil,
I just run into a new problem. While the code above works when I manually enter it in an HTML element, it won't work if the html is loaded dynamically. I suspect I that I need to attach a ng-bind-compile.
i have created this javascript below to compile the html, but it returns this error: ReferenceError: $compile is not defined
How to I properly create an angular-js resource? The original code is here https://github.com/incuna/angular-bin... and i have been trying to adapt to the pre-exiting templates e.g. backButton.
Your help is appreciated.
===
define( [ 'require' ], function( ){
return [{
type: 'directive',
name: 'bindHtmlCompile',
deps: [directive_bindHtmlCompile]
}];
function directive_bindHtmlCompile(){
return {
restrict: 'A',
link: function(scope, element, attrs){
scope.$watch(function () {
return scope.$eval(attrs.bindHtmlCompile);
},
function (value) {
// In case value is a TrustedValueHolderType, sometimes it
// needs to be explicitly called into a string in order to
// get the HTML string.
element.html(value && value.toString());
// If scope is provided use it, otherwise use parent scope
var compileScope = scope;
if (attrs.bindHtmlScope) {
compileScope = scope.$eval(attrs.bindHtmlScope);
}
$compile(element.contents())(compileScope);
});
}
};
}
});