AngularJS 1.6.5如何避免在输入字段的'值'中执行角度表达

Question

我在AngularJS 1.6.5中使用ASP.NET MVC。

在Razor视图，我有以下输入：

<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标签。但是，我没有任何服务器端验证来检查是Angular表达式的东西（即，由{{双大括号}}包围的表达式）

因此，如果我搜索{{1 + 2} }，上面的输入字段将评估表达式为“3”，并且输入字段显示我搜索“3”，而不是我实际搜索的内容：“{{1 + 2}}”：

Angular提供了ngNonBindable directive，它基本上告诉Angular不编译元素的内容。但是，这不会帮助我使输入字段的“值”属性不可绑定。我是否需要清理这个输入服务器端（为角表达式实现我自己的清理器），还是有一种“角度”的方式来实现它，类似于使用ngNonBindable？

Answer 1

实际上，您必须从操场中删除Razor，angularjs应该考虑前端方面，它不包括依赖于服务器绑定。您应该提出http请求，以便用ng-model代替您的表单。

但是，如果您坚持以这种方式使用angularjs，则可以使用自定义指令来设置ngModel值。以下代码片段实现了一个指令，该指令针对input标签，并在其上设置ng-model，并在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模板驱动代码无序，这也是服务器端处理的浪费。