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

回答

相关问题