AngularJS 1.6.5入力フィールドの 'value'で角度表現を実行しないようにする方法

Question

ASP.NET MVCをAngularJS 1.6.5で使用します。かみそりビューで

、私は、次の入力を有する：

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

をModel.Search値は、バックエンドから来る、およびユーザ入力を表します。 ASP.NET MVCは標準的なエンコード/サニタイズ処理をしているので、たとえばhtmlタグを検索することはできません。しかし、角のある式（つまり{{二重中括弧}}で囲まれた式）を調べるサーバー側の検証はありません。

したがって、{{1 + 2} }上記の入力フィールドは式を「3」と評価し、実際に検索したのではなく「3」を検索した入力フィールドが表示されます：「{{1 + 2}}」：

Angularは、基本的にAngularに要素の内容をコンパイルしないように指示する、ngNonBindable directiveを提供します。しかし、これは私の入力フィールドの 'value'属性をバインド不可能にするのに役立ちません。この入力サーバー側（角表現のための独自のサニタイザを実装しています）をサニタイズする必要がありますか、それともnagNonBindableを使用するのと同様の方法がありますか？

Answer 1

実際には、プレイグランドからRazorを取り外す必要があります。角度ジェネレータはフロントエンドの面倒を見ることになっています。サーバサイドのバインディングに依存しません。フォームにng-modelを入力するには、httpリクエストを行う必要があります。

ただし、この方法でanglejを使用するとしたら、カスタムディレクティブを使用してngModelの値を設定することができます。次のスニペットでは、ng-modelというタグを持つinputというタグを指定し、ng-modelプロパティのvalue属性の評価値を設定するディレクティブを実装しています。

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>

私は強くあなたがHTTP APIベースのアプローチを使用するように助言し、angularjsテンプレートを使用してサーバーサイドを混合して障害にあなたのコードを駆動し、それはまた、サーバーサイド処理の無駄です。