Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Please not that AngularJS templates are only compiled once during application bootstrap as long as you don't use $compile on your own.</p> <h1>AngularJS compile and linking phases</h1> <p>To understand why your code is not working you must understand AngularJS compile and linking phases. Once you load your application AngularJS compiles the HTML element which contains a ng-app attribute with the $compile service, e. g. </p> <pre><code>&lt;html ng-app="MyApp"&gt;&lt;/html&gt; </code></pre> <h2>Compile phase</h2> <p>$compile identifies all directives in your HTML template calling each directive's compile function working its way up from your angular root element ($rootElement) through the html dom tree.</p> <h2>Linking phase</h2> <p>Each compile function returns a post linking and optionally a pre-linking function. Once AngularJS has compiled the whole dom below the root element it starts to call the pre-link function in the same way has it has called the compile function before. Once reached at the leaves of the dom the directive's post-link functions are called going back down to the root element.</p> <h2>Interpolation</h2> <p>Strings with expressions between {{ and }} are handled by AngularJS as special directives called interpolate directives. Just as any other directive these are created during compilation using the $interpolate service. The $interpolate service receives an interplated string with a number of expressions and returns an interplate function. The post-link function of the interpolate directives create a watch on the interpolate function so that they can update the html node once any expression in the interplated string changes.</p> <h1>A translate module</h1> <p>When we now look at your code you are actually setting the text of an html element to an AngularJS interpolated string with an expression wrapped between {{ and }} in the post-link function of your directive.</p> <p>As explained above at this time AngularJS has already compiled the template so that it will never compile the interpolated string with your expression.</p> <p>As I can see from your code you are trying to implement some kind of translate directive. Such directive must call the $compile function when it should consider interpolated strings and other AngluarJS template code in the translated string:</p> <pre><code>directive('translate', ['$compile','translate', function factory($compile, translate) { return { priority: 10, // Should be evaluated before e. g. pluralize restrict: 'ECMA', link: function postLink(scope, el, attrs) { if (el.contents().length) { el.html(translate(el.text())); $compile(el.contents())(scope); // This is only necessary if your translations contain AngularJS templates } }, }; }]). </code></pre> <p>The translate directive uses a translate service to get the actual translation. The translateProvider has an add method which you can use to add translations e. g. from a language bundle:</p> <pre><code>.provider('translate', function() { var localizedStrings = {}; var translateProvider = this; this.add = function(translations) { angular.extend(localizedStrings, translations); }; this.$get = ['$log', '$rootScope', function ($log, $rootScope) { var translate = function translate(sourceString) { if (!sourceString) { return ''; } sourceString = sourceString.trim(); if (localizedStrings[sourceString]) { return localizedStrings[sourceString]; } else { $log.warn('Missing localization for "' + sourceString + '"'); return sourceString; } }; return translate; }]; }). config(function(translateProvider) { translateProvider.add({'My name is {{name}}': 'Mi nombre es {{name}}'}); // This might come from a bundle }). </code></pre> <h1>Using the module</h1> <p>You can now use the module as follows:</p> <pre><code>&lt;div ng-app="myApp" ng-controller="MyCtrl"&gt; &lt;span data-translate&gt;My name is {{name}}&lt;/span&gt; &lt;/div&gt; </code></pre> <p>I have created a jsFiddle with a full example: <a href="http://jsfiddle.net/jupiter/CE9V4/2/">http://jsfiddle.net/jupiter/CE9V4/2/</a></p>
    singulars
    1. This table or related slice is empty.
    1. POTwo-way data binding does not work with directives in Angular.js
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USjupiter
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload