AngularJS不使用jQuery顯示HTML

我有一個文本框，一個HTML頁面，我使用的是位AngularJS來顯示剩餘的字符個數 -AngularJS不使用jQuery顯示HTML

<div ng-app="" class="container-fluid"> 
     <form class="form" role="form"> 
      <div class="form-group"> 
       @Html.TextArea("Description", htmlAttributes: new { @class = "form-control", placeholder = "Description, ng_model = "descMessage" }) 
       <div> 
        <label>{{ 500 - descMessage.length }}</label> 
       </div> 
      </div> 
     </form> 
</div>

能正常工作時，我只是顯示它作爲局部視圖。我得到正確的字符數剩餘。

@Html.Partial("~/Views/Desc/Index.cshtml")

但是，當我通過JQuery顯示它時不起作用。它的字符總是顯示爲 - {{ 500 - descMessage.length }}，而不是字符。

var options = { 
     url: "/Desc/Index", 
     type: "get", 
     dataType: "html" 
    }; 

    $.ajax(options).done(function (data) { 
     var $target = $("#displayform"); 
     $target.html(data); 

    });

AngularJS表達應該在這裏進行評估。爲什麼這不會發生？我經歷過很多JQuery，但第一次使用AngularJS。我怎樣才能解決這個問題？

來源

2015-02-08 Sam

這很棘手，因爲您試圖修改Angular的「世界」之外的數據。這似乎很容易做到，但是因爲您創建的是與Angular綁定的元素，所以它可以讓內容進入一些自由空間，或者更確切地說，它是如何由Angular「渲染」的。

tl; dr; - 您需要在控制器內部使用帶有Angular的$ sce提供程序，以便將新內容「信任」爲HTML;使用$ sce.trustAsHtml（內容）。最好的方法是在這裏實際創建一個控制器，並使用ng-controller將其附加到您的表單。

訣竅是在textarea上使用ng-change鉤住文字變化而不是使用jQuery。從最近轉換的硬核jQuery人員到現在喜歡在Angular的「世界」中生活的人，我可以告訴你，使用事件，控制器和http.get有很多相似之處，並且易於使用。

下面是一些僞代碼，快速讓你去：

HTML標記僞：

<form ng-controller="myController as ctrl"> 
    ... 
    <textarea ... ng-model="textinput" ng-change="ctrl.updateLength()"></textarea> 
    <span ng-bind-html="ctrl.textRemainingDisplay"> 
</form>

通知NG-模型在那裏 - 我們將使用在變化的事件處理程序。另一個關鍵部分是顯示，我們用ng-bind-html;下面的$ sce提供程序將給我們呈現所需格式的渲染，而不需要任何進一步的修改。

的Javascript僞標記：

angular.module("myModule",[]).controller("myController", function($scope, $http, $sce) 
{ 
    this.updateLength = function() 
    { 
     this.textRemainingDisplay = $sce.trustAsHtml(500-this.textinput.length); 
    } 
});

你可以[可能應]用指令做同樣的事情，我只是在想，別人誰也學角度說控制器是一個比較容易消化。差異將是控制器上的一些語法（使用指令來代替並返回一個對象），然後跨度上的標記將變成類似於<span mydirective></span>的東西，並且創建的指令將具有與上面所做的相同的範圍。

再次，這只是僞代碼，我沒有測試過任何東西，但它應該能夠讓你在純粹的Angular中獲得一個簡單的計數器，它不需要jQuery和Angular在一起。

HTH！

來源

2015-02-08 14:34:03

我真的認爲有一個更簡單的方法來做到這一點，至於我看來Angular只是失去了綁定，我只需要重新調整它（加載html後可能）。我可以輕鬆構建一個jQuery計數器，但不希望Angular對我這麼好。無論如何，將嘗試實施您的解決方案，看看它是否有效。 – Sam 2015-02-08 15:18:45

問題在於Angular不知道值是否已經改變，因爲它發生在應用程序範圍之外。我剛剛處理了一些類似的問題。您可以通過獲取Angular模塊的句柄來調用jQuery代碼中的更新 - 我看到了一些解決方案，但它們都比使用控制器或指令和純Angular更復雜。使用熟悉的jQuery代碼保存的一點點在將兩者結合在一起以處理已綁定到Angular的元素上的DOM「內容」時很快就會丟失。 – 2015-02-08 16:20:51

試過但它不工作。 – Sam 2015-02-08 18:50:56

AngularJS不使用jQuery顯示HTML

回答

相關問題