Question

我的问题可能有点令人困惑，我会尽量让它变得简单。我试图使用cheerio.js抓取一个网站，只提取输入字段，将它们发送到我的前端，渲染它们并使用ng-model将它们绑定到我的控制器上的值。 Angular不会因为安全原因让我显示原始html，所以我通过$ sce.trustAsHtml（）和ng-bind-html发送它。当我尝试使用ng-model将输入字段绑定到控制器上的值时，我的问题就出现了。它只是不起作用，我不知道它是否与$ sce有关或者我的方法是否完全错误。

控制器：

app.controller('homeCtrl', function ($scope, $sce, ScraperFactory) {

    $scope.value

    $scope.renderHtml = $sce.trustAsHtml('<input type="text" ng-model="value"/>')

});

HTML：

<section id="home">

    <pre> value = {{value}}</pre>

    <input type="text" ng-model="value" />

    <p ng-bind-html="renderHtml"></p>

</section>

预先输入和第一次输入按预期工作。

Answer 1

创建一个自定义指令，该指令将html作为输入，然后只需将已编译的html附加到元素即可。你可以做一些更精彩的翻译，但这里有一些代码和一个有效的插件。

// js

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

app.controller('MainCtrl', function($scope, $sce, $compile) {
  $scope.name = 'World';

  $scope.value;

  $scope.html = '<input  compile type="text" ng-model="value"/>';

});

app.directive("compileHtml", function( $compile) {
    return {
        restrict: "A",

        link: function (scope, element, attributes) {

            element.append($compile(attributes.compileHtml)(scope));

        }
    }
});

// html 

<section id="home">

    <pre> value = {{value}}</pre>

    <input type="text" ng-model="value" />

    <p compile-html ={{html}}></p>

</section>

http://plnkr.co/edit/XSGnyMGNa1vb4dB2z9wH?p=preview

使用ngModel通过$ sce服务绑定输入字段

1 个答案: