标签: ng-bind-html

我需要一些使用ng-bind-html创建的ng模型的帮助.我在服务器中有一个JSON文件,其中有一些html和一些像这样的输入:

*以.json

{  
  "test": {
    "1": {
      "question":"<span>1. something:</span>",
      "options":"<input type='radio' name='q1' ng-model='q.1' value='a'>a) op 1<br><input type='radio' name='q1' ng-model='q.1' value='b'>b) op 2<br><input type='radio' name='q1' ng-model='q.1' value='c'>c) op 3<br><input type='radio' name='q1' ng-model='q.1' value='d'>d) op 4<br><input type='radio' name='q1' ng-model='q.1' value='e'>e) op 5<br>",
      "answer":"c"
    },
    "2": {
        ...
    }
  }
}

然后在我的HTML文件中,我有类似的东西:

<div class="testContent">
        <div class="test">
            <div class="questions" ng-repeat="qs in questions" ng-show="questions.length">
                <div ng-bind-html="qs.question"></div>
                <div class="options" ng-bind-html="qs.options">
                </div>
            </div>
        </div>
        <br>
        <div class="nextBtn">
            <a href="#test/6" class="btn btnNext" ng-click="save()"> continue ></a>
        </div>
    </div>

在我的Angular控制器中,我有对JSON文件的ajax调用: …

我正在创建一个AngularJS单页面应用程序.数据将从json-format中的Web服务获取.

问题是一些文本元素带有预先格式化的html标签

json输出:

{
   "text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>"
}

现在我如何显示此文本并直接呈现html,以便只向用户显示"test",其余用作标记？

<h1>{{data.text}}</h1>

在角度1绑定工作,如ng-bind-html ="htmlValue"

如何在Angular 2.0中绑定html

在内部ng-repeat,以下代码不起作用:

<input type="text" ng-bind-html="row.value" />

以下是:

<span ng-bind-html="row.value"></span>

我猜ng-bind-html是无法绑定到一个input元素？

也没有ng-bind-html实际的元素与模型绑定(在这里row.value)

如何限制angularJS中ng-bind-html结果的字符数？可能吗？

例如,<span>some text </span>在js文件中,使用$sce和ng-bind-html转换为html.

我想表现出来som...我怎么能限制它？

这是我的问题,有什么优点和缺点？

在我的应用程序中我使用插值但我得到这样的错误

{{::sport.name}} - > NHL Futures & Props

如果我使用 ng-bind-html

ng-bind-html="sport.name" - > NHL Futures & Props

在这种情况下ng-bind-html正在做我想要的.但是,它有什么问题吗？

有没有比另一个好？

所以告诉我,我愿意接受建议.

我需要清理选项中的特殊字符,但它无法正常工作.也许有人可以告诉我应该如何正确地做到这一点？

例如:

HTML:

<div ng-controller="Ctrl">
    <select id="limitType" name="limit" ng-model="selectedLimit" ng-options="limit.text for limit in limits" ng-init="selectedLimit='5'" ng-bind-html="limit.text"></select>
<div>

JS:

var app = angular.module('app',['ngSanitize']);

function Ctrl($scope) {
  $scope.limits = [{
    text: 'Afficher ™ par page'
  }, {
    text: 'Afficher 10 par page'
  }, {
    text: 'Afficher 15 par page'
  }, {
    text: 'Afficher 20 par page'
  }];   
}

这里是关于小提琴的链接:http://jsfiddle.net/rfTV2/3/

我是AngularJS领域的新人,当然我正在做错事.所以,这是我的问题:我有一个小聊天小部件,它通过PHP API从JSON获取数据.在我的JSON中,我提供了包装器和一些ng*标签的所有消息.我遇到的问题是不会对这些元素触发ng-click操作.html块注入了ng-bind-html.

这是我的角度应用程序:

var chat = angular.module("chat", ['ngDialog']);

chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {

    $scope.messages = "";


    $scope.getData = function() {
        $http.get("/url/to/api")
            .success(function(data, status, headers, config) {
                $scope.messages = data.html;
            }).error(function(data, status, headers, config) {
                //alert("AJAX f   ailed!");
            });
    };

    $scope.getData();

    $scope.getHtml = function(html){
        return $sce.trustAsHtml(html);
    };

    // Function to replicate setInterval using $timeout service.
    $scope.intervalFunction = function(){
        $timeout(function() {
            $scope.getData();
            $scope.intervalFunction();
        }, 5000)
    };


    // Kick off the interval
    $scope.intervalFunction();

    $scope.messageAdminTools = function(message_id)
    {
        console.log("called");
        var template …

我有一个数据源,用于在页面上呈现博客文章.其中一个条目包含IFRAME.我看到IFRAME在数据源中返回但它永远不会呈现给ng-bind-html中的页面.

这是我的代码:

<div class="blog-post-content" ng-bind-html="entry.content" itemprop="text">
</div>

如果我将其切换为以下内容,我会看到IFRAME标记已呈现出来,但当然现在它是RAW HTML.

<div class="blog-post-content" itemprop="text">
    {{entry.content}}
</div>

如何将此IFRAME呈现到页面.

好的——所以你可能会想为什么你想要这个，但我正在尝试使用 ng-html-bind 渲染一些 HTML，如下所示（在 HAML 中）：

#my-visualization-panel{'ng-bind-html' => 'htmlSource'}

htmlSource 有一些 html，它使用 c3.js 可视化库呈现可视化。看起来htmlSource像这样

<script>
  var MY_DATA = localStorage.getItem('MY_DATA');
  c3.generate({
    data: {
      columns: MY_DATA
    }
 });
</script>

所以问题是我通过重新设置来更新可视化localStorage['MY_DATA']。但是，虽然引用的数据MY_DATA可能会更改，但实际数据htmlSource不会更改，因此视图无法更新。

有没有办法强制视图更新，即使模型表面上没有更新？