AngularJS 1.6.5如何避免在輸入字段的'值'中執行角度表達

我在AngularJS 1.6.5中使用ASP.NET MVC。AngularJS 1.6.5如何避免在輸入字段的'值'中執行角度表達

在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？

來源

2017-08-30 lcaaroe

實際上，您必須從操場中刪除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模板驅動代碼無序，這也是服務器端處理的浪費。

來源

2017-08-30 15:24:34

如果Model.Search是「{{1 + 2}}」，那麼ngValue仍然被評估爲角度表達式。我很欣賞這個評論，但我不明白它如何解決原來的問題。 – lcaaroe

@Icaaroe我很抱歉，我誤解了這一點，你實際上是在尋找'ngModel'的初始值，以評估'value'屬性的插值表達式。我用不同的方法更新了我的答案。 –

我實際上試圖*避免*評估值屬性中的表達式。 – lcaaroe

AngularJS 1.6.5如何避免在輸入字段的'值'中執行角度表達

回答

相關問題