AngularJS 1.6.5 Wie verhindert man die Ausführung eines Winkelausdrucks im 'Wert' des Eingabefelds

Question

Ich benutze ASP.NET MVC mit AngularJS 1.6.5.

In einer Rasierklinge Ansicht, habe ich folgenden Eingang:

<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" 
/> 

Der Wert Model.Search vom Back-End kommt, und stellt die Benutzereingabe. ASP.NET MVC kümmert sich um eine Reihe von Standard-Kodierung/Bereinigung, so dass ich zum Beispiel nicht nach HTML-Tags suchen konnte. Ich habe jedoch keine serverseitige Validierung, um nach etwas zu suchen, das ein Angular-Ausdruck ist (dh ein Ausdruck umgeben von {{doppelt geschweiften Klammern}})

Also, wenn ich nach {{1 + 2} gesucht habe }, würde das obige Eingabefeld den Ausdruck auf "3" auswerten, und das Eingabefeld zeigt an, dass ich nach "3" gesucht habe und nicht nach dem, was ich tatsächlich gesucht habe:

Angular bietet die ngNonBindable directive, die im Wesentlichen Angular erklärt, den Inhalt des Elements nicht zu kompilieren. Das hilft mir jedoch nicht, das Wert-Attribut meines Eingabefeldes nicht bindbar zu machen. Muss ich diese Input-Server-Seite bereinigen (indem ich meinen eigenen Desinfektor für eckige Ausdrücke implementiere), oder gibt es einen "eckigen" Weg, dies zu tun, ähnlich der Verwendung von ngNonBindable?

Answer 1

Eigentlich muss man Razor vom Spielplatz entfernen, angularjs soll sich um den Frontendaspekt kümmern, es beinhaltet aber nicht serverbasierte Bindungen. Sie sollten eine http-Anfrage machen, um Ihr Formular mit ng-model zu füllen.

Wenn Sie jedoch anglejs auf diese Weise verwenden möchten, können Sie eine benutzerdefinierte Anweisung verwenden, um den Wert ngModel festzulegen. Das folgende Snippet implementiert eine Anweisung, die input Tags mit ng-model darauf abzielt, und legt den bewerteten Wert des value-Attributs in der ng-model-Eigenschaft fest.

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>

Ich rate Ihnen http api basierten Ansatz zu verwenden, server Mischen mit AngularJS Vorlagen treibt Ihren Code Störung, und es ist auch eine Verschwendung von serverseitigen Verarbeitung.