Menu
I'm making a directive that modifies it's inner html. Code so far:
.directive('autotranslate', function($interpolate) { return function(scope, element, attr) { var html = element.html(); debugger; html = html.replace(/\[\[(\w+)\]\]/g, function(_, text) { return '<span translate="' + text + '"></span>'; }); element.html(html); } }) It works, except that the inner html is not evaluated by angular. I want to trigger a revaluation of element's subtree. Is there a way to do that?
Thanks :)
296
Using attrs you are able to access the attributes defined in your html tag like <fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"> So in this case you will have access to the symbol and readonly attributes.
Define custom directive to handle above custom html tags. var mainApp = angular. module("mainApp", []); //Create a directive, first parameter is the html element to be attached. //We are attaching student html tag. //This directive will be activated as soon as any student element is encountered in html mainApp.
Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.
Note: When you create a directive, it is restricted to attribute and elements only by default. In order to create directives that are triggered by class name, you need to use the restrict option. The restrict option is typically set to: 'A' - only matches attribute name.
You have to $compile your inner html like
.directive('autotranslate', function($interpolate, $compile) { return function(scope, element, attr) { var html = element.html(); debugger; html = html.replace(/\[\[(\w+)\]\]/g, function(_, text) { return '<span translate="' + text + '"></span>'; }); element.html(html); $compile(element.contents())(scope); //<---- recompilation } }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
