AngularJS 1.6.5 Comment éviter l'exécution de l'expression angulaire dans la 'valeur' ​​du champ de saisie

Question

J'utilise ASP.NET MVC avec AngularJS 1.6.5.

Dans une vue Razor, j'ai l'entrée suivante:

<input id="live-search-input" 
    class="live-search__input" 
    type="search" 
    name="search" 
    autocomplete="off" 
    ng-model="searchTerm" 
    ng-model-options="{debounce: 500}" 
    ng-click="resultsClick($event)" 
    value="@Model.Search" 
/> 

La valeur Model.Search vient du back-end, et représente l'entrée utilisateur. ASP.NET MVC s'occupe d'un tas de codage/désinfection standard, donc je ne pouvais pas, par exemple, rechercher des balises html. Cependant, je n'ai aucune validation côté serveur pour vérifier quelque chose qui est une expression angulaire (c'est-à-dire une expression entourée de {{doubles accolades}})

Donc, si je cherchais {{1 + 2} }, le champ de saisie ci-dessus évaluerait l'expression à "3" et le champ de saisie afficherait "3", plutôt que ce que je cherchais réellement: "{{1 + 2}}":

Angular fournit ngNonBindable directive, qui indique essentiellement à Angular de ne pas compiler le contenu de l'élément. Cependant, cela ne m'aide pas à rendre l'attribut 'value' de mon champ de saisie non-liable. Dois-je désinfecter ce côté du serveur d'entrée (en mettant en œuvre mon propre désinfectant pour les expressions angulaires), ou y a-t-il une manière «angulaire» de le faire, similaire à l'utilisation de ngNonBindable?

Answer 1

En fait, vous devez supprimer Razor du terrain de jeu, angularjs est censé prendre en charge l'aspect frontal, il ne dépend pas des liaisons côté serveur. Vous devez effectuer une requête http afin de remplir votre formulaire avec ng-model à la place. Toutefois, si vous insistez pour utiliser angularjs de cette manière, vous pouvez utiliser une directive personnalisée pour définir la valeur ngModel. L'extrait suivant implémente une directive qui cible les balises input avec ng-model et définit la valeur évaluée de l'attribut value dans la propriété ng-model.

angular.module('app', []) 
 
    .directive('input', function($parse) { 
 
    return { 
 
     restrict: 'E', 
 
     require: 'ngModel', 
 
     link: function(scope, element, attrs, ngModelCtrl) { 
 
     // retrieve ngModel getter & setter 
 
     var modelGetter = $parse(attrs['ngModel']); 
 
     var modelSetter = modelGetter.assign; 
 

 
     // observe attrs evaluation 
 
     attrs.$observe('value', function(value) { 
 
      // use model setter to set the view value of the ngModel 
 
      modelSetter(scope, value); 
 
     }); 
 
     } 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> 
 
<div ng-app="app"> 
 
    <h1>{{ name }}</h1> 
 
    <input type="text" ng-model="name" value="{{ 'Chuck Norris' }}"> 
 
</div>

Je vous conseille fortement d'utiliser l'approche basée http api, le mélange avec Serverside AngularJS modèles entraîne votre code au désordre, et il est aussi un gaspillage de traitement de Serverside.