Javascript Girl
  1. Javascript Girl
  3. Angulaire: compilation sélective de modèles
Intereting Posts
Le marqueur SVG Google Maps ne s'affiche pas sur IE 11 Accéder à la signature / cryptage dans un Keystore d'un navigateur en utilisant JavaScript – exemple de code? (WebCryptoAPI) Coordonnées GPS: 1 km autour d'un point L'élément de stockage local HTML5 n'est pas enregistré correctement Le sous-domaine modifie le chemin de l'image Uncaught SecurityError: Impossible de lire la propriété 'contentDocument' à partir de 'HTMLIFrameElement' Est-il possible de fermer la boîte de confirmation après un intervalle de temps? Créez dynamiquement une boîte d'alertes Bootstrap via JavaScript Texte JavaScript entre guillemets JQgrid: en-têtes de ligne à plusieurs colonnes Comment puis-je animer le dessin du texte sur une page Web? Création d'un nouvel élément DOM à partir d'une chaîne HTML utilisant des méthodes DOM intégrées ou un prototype Django + js Framework Ne tirez-vous qu'un événement une seule fois? Accès à une API Google Maps sur une base de données avec Angular

Angulaire: compilation sélective de modèles

Je sais que ng-non-bindable permet à un élément donné et ses enfants de ne pas être compilés en tant que modèle. Il semble qu'il ait été conçu pour être partagé à travers un modèle au besoin. Existe-t-il un moyen de dire à Angular de ne pas traiter un élément donné, MAIS pour "poke trous" dans cela et permettre la sélection des éléments enfants sélectionnés? Par exemple, j'aimerais pouvoir faire quelque chose comme ça: 

 <div ng-non-bindable> <div>{{2+2}}</div> <div ng-bindable>{{2+2}}</div> </div>

Et obtenez-le:

{{2 + 2}}

4

Je comprends que ng-non-bindable n'autoriserait même pas la ng-bindable à être traité, même s'il existait. Mais existe-t-il quelque chose pour permettre une approche des modèles comme je l'ai exprimé?

Pour être plus approfondi, ma solution idéale ne traiterait pas d'Angular jusqu'à ce que l'on trouve le ng-bindable , pas seulement les expressions d'accolade. Par exemple: 

 <div ng-non-bindable> <div ng-repeat="n in [1,2,3]">{{n+2}}</div> <div ng-bindable ng-repeat="n in [1,2,3]">{{n+2}}</div> </div>

Entraînerait:

{{N + 2}}

3

4

5

nonBindable personnalisée non- nonBindable

Vous ne pourrez pas utiliser ngNonBindable (bien, vous pouvez le décorer) comme ceci en raison de la façon dont la directive est configurée. Cependant, il est très facile d'écrire une directive personnalisée avec ce comportement: 

 app.directive('nonBindable', function($compile) { return { terminal: true, priority: 999, compile: function(tElement) { return function(scope) { var bindable = tElement[0].querySelectorAll('[bindable]'); [].forEach.call(bindable, function(el) { $compile(el)(scope); }); }; } }; });

Et utilisez-le comme ceci: 

 <div non-bindable> <div>{{2+2}}</div> <div bindable>{{2+2}}</div> </div> <br><br> <div non-bindable> <div ng-repeat="n in [1,2,3]">{{n+2}}</div> <div bindable ng-repeat="n in [1,2,3]">{{n+2}}</div> </div>

Demo: http://plnkr.co/edit/NEDP4WkBN4TlXdXKo8WI?p=preview

Décorez ngNonBindable

Vous pouvez décorer la directive ngNonBindable origine comme ceci: 

 app.config(function($provide) { $provide.decorator('ngNonBindableDirective', function($delegate, $compile) { var directive = $delegate[0]; directive.compile = function(tElement) { return function(scope) { var bindable = tElement[0].querySelectorAll('[bindable]'); [].forEach.call(bindable, function(el) { $compile(el)(scope); }); }; }; return $delegate; }); });

Et l'utiliser de cette façon: 

 <div ng-non-bindable> <div>{{2+2}}</div> <div bindable>{{2+2}}</div> </div> <br><br> <div ng-non-bindable> <div ng-repeat="n in [1,2,3]">{{n+2}}</div> <div bindable ng-repeat="n in [1,2,3]">{{n+2}}</div> </div>

Demo: http://plnkr.co/edit/HVczVkkQR88hC7191ep0?p=preview