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 值。以下 sn-p 实现了一个指令，该指令针对带有 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模板混合会导致你的代码混乱，而且这也是对服务端处理的浪费。