50703

Using directives inside directives causes binding issues

Question:

We're using Angular and we're having trouble with resolving variables in directives. This fiddle shows our issue:

Here's the full code: <a href="http://jsfiddle.net/VX5LE/65/" rel="nofollow">http://jsfiddle.net/VX5LE/65/</a>

//data-translate should handle the translating of the useableButton text app.directive('window', ['translateService', function (translateService) { return { restrict: 'E', transclude: true, scope: { useableButtons: '='}, replace: true, template: '<div>' + '<button data-ng-repeat="useableButton in useableButtons" data-translate>{{useableButton}}</button>' + '</div>' }; }]);

I have seen some answers that solve this by:

<ol><li>

Using a filter to translate these. - That is actually our current solution but that hinders us with different functionality.

</li> <li>

Attaching watches in the controller. - We actually want to avoid watches in our controllers as it makes the code quite dirty if you have a lot of them.

</li> </ol>

Preferably I would like to see a solution that resides inside of the translate directive without cluttering the controllers.

Answer1:

You can do this by interpolating the values manually, then parsing it with the $eval function of the desired scope.

Here is the fiddle: <a href="http://jsfiddle.net/VX5LE/66/" rel="nofollow">http://jsfiddle.net/VX5LE/66/</a>

The code of the translate-directive:

app.directive('translate', ['translateService', '$interpolate', function (translateService, $interpolate) { return { restrict: 'A', link: function (scope, element, attrs) { var pHTML = element.html(); var parsed = $interpolate(pHTML); var translated_result = translateService.translate(scope.$eval(parsed)); element.text(translated_result); } } }]);

Recommend

  • Unable to access variable in other class for text display [Unity]
  • How to extend ngx-translate pipe
  • Why is scope.$digest() necessary inside $document.keydown()?
  • How to use angular directives to call dojo DOM manipulation code
  • Transcluded element not being deleted on removal of list item when using ng-repeat
  • How do you 'require' an attribute on an angularjs directive?
  • AngularJS - Directive's class name cannot bring into inner template
  • How to specify individual tasktrackers(nodes) on which a mapreduce should run?
  • ng-bind-html doesn't work with script
  • Evaluate or call directive on click in angular
  • How to enable resize on JsPlumb widget?
  • Moving from Session-based token mechanism to OAuth 2.0 mechanism
  • PHP: Securing database connection credentials
  • How to limit the number of actors of a particular type?
  • XML Schema: Child element type based on parent attribute 'type'
  • Is Firebase really Secure?
  • How to use Firebase REST API(Python) for authentication of a user?
  • Why android app size is increasing after publishing on market?
  • Are there any use to limit yourself to HTTP1.0?
  • How can I restrict the values a user enters into TextBox?
  • create a decimal star rating for a comment in angularjs
  • Multiple Defered WHERE clause expressions in LINQ to SQL
  • How to apply font-family in ng-option for each option
  • Display informations about a bubble chart D3.js in AngularJS
  • Trouble getting ng2-datetime imported
  • Restric user access to table using Sql Server 2008
  • Handle Authentication and Authorization in jax-rs webservice with cxf
  • Compiling Element Causes Input Caret Position to Move to End
  • R h2o.glm - issue with max_active_predictors
  • Using $compile in a directive triggers AngularJS infinite digest error
  • Is there any way to bind data to data.frame by some index?
  • Django query for large number of relationships
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • Net Present Value in Excel for Grouped Recurring CF
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?