AngularJS不使用JQuery显示html [英] AngularJS not working with JQuery displayed html

问题描述

我有一个带有文本框的Html页面，并使用一些AngularJS来显示剩余字符的数量 -

 < div ng-app =class =container-fluid> 
< form class =formrole =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，
类型：get，
 dataType：html
}; 
 
 $ .ajax（选项）.done（函数（数据）{
 var $ target = $（＃displayform）; 
 $ target.html（data）; 
 
}）; 
  

AngularJS表达式应该在这里进行评估。为什么这不会发生？我经历过很多JQuery，但第一次使用AngularJS。我怎样才能解决这个问题？

解决方案

这很棘手，因为您试图修改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 =textinputng-change =ctrl.updateLength（）>< / textarea> 
< span ng-bind-html =ctrl.textRemainingDisplay> 
< / form> 
  

注意那里的ng-model - 我们将在更改事件处理程序中使用它。
另一个关键部分是显示器，我们使用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）; 
} 
}）; 
  

您可能[应该]使用指令来做同样的事情，我只是想还学习了Angular，控制器更容易消化。区别在于控制器上有一些语法（使用指令代替并返回一个对象），然后跨度上的标记就会变成类似于< span mydirective>< / span> 和创建的指令将具有与我们上面所做的相同的范围。

再次，这只是伪代码，我没有测试任何东西，但它应该工作给你一个纯粹的Angular中的简单计数器，它不需要jQuery和Angular。

HTH！

I have a Html page with a text box and am using a bit of AngularJS to display the count of characters remaining -

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

This works fine when I am simply displaying it as a partial view. I get correct count of chars remaining.

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

But does not work when I display it via JQuery. Instead of chars remaining, it always displays the actual text as - {{ 500 - descMessage.length }}.

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

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

    });

The AngularJS expression was supposed to be evaluated here. Why does this not happen? I have used JQuery a lot in my experience, but first time using AngularJS along with it. How can I go about fixing this?

解决方案

This is tricky because you're attempting to modify data outside of Angular's "world". It seems easy enough to do, but because you're creating elements that are bound to Angular, it's taking some liberties with the content that can go in there, or rather how it's "rendered" by Angular.

tl;dr; - you need to use the $sce provider with Angular inside a controller in order to "trust" new content as HTML; use $sce.trustAsHtml(content). Best approach would be to actually create a controller here and attach it to your form with ng-controller.

The trick will be to use ng-change on the textarea to hook to the text changing instead of using jQuery. From a recently converted hardcore jQuery guy to one who now prefers to live inside Angular's "world", I can tell you that using events, controllers, and http.get has a lot of similarities and is easy to work with.

Here's some pseudo-code to quickly get you going:

HTML Pseudo Markup:

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

Notice ng-model in there - we'll use that in the change event handler. The other critical piece is the display, which we us ng-bind-html; the $sce provider below will give us a render in the format needed to bind without any further ado.

Javascript Pseudo markup:

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

You could [probably should] use a directive to do the same thing, I just think as someone who's also learning Angular that controllers are a little easier to digest. Difference would be some syntax on the controller (using directive instead and returning an object) and then the markup on the span would go something like <span mydirective></span> and the created directive would have the same scope as what we did above.

Again this is just pseudo-code, I haven't tested anything but it should work to get you a simple counter in pure Angular that doesn't require jQuery and Angular together.

HTH!

这篇关于AngularJS不使用JQuery显示html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！