18

一度クリックするとサービスを呼び出してデータを返す複数のタブを含むタブページがあります。そのデータの一部は html フォームを返し、非常にランダムです。入力された値を収集し、サービスを介してデータをサーバーに送り返したいと考えています。私が抱えている問題は、動的に作成しているhtmlの入力要素からデータを取得できないことです。

問題が何であるかを示すために、 Plunkerを作成しました。html の値はいつでも変更される可能性があるため、html をハードコーディングしても機能しないことに注意してください。ここに plunker からのコードがありますが、何が起こっているかを最もよく理解するには plunker を見てください。

app.js

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

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

    $scope.htmlElement = function(){
        var html = "<input type='text' ng-model='html'></input>";
        return $sce.trustAsHtml(html);
    }

});

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <div ng-bind-html="htmlElement()"></div>

    {{html}}

  </body>

</html>
4

3 に答える 3

26

1 つの解決策は、このPlunkerで示されているように、$templateCache で ngInclude を使用することです。

注意すべき点がいくつかあります。

1 つ目は、ここで説明されているように、サービスを使用してテンプレートをフェッチし、それを $templateCache に追加できることです(コピーされた例):

myApp.service('myTemplateService', ['$http', '$templateCache', function ($http, $templateCache) {
  $http(/* ... */).then(function (result) {
    $templateCache.put('my-dynamic-template', result);
  });
}]);

次に、次のようにテンプレートに含めることができます。

<div ng-include="'my-dynamic-template'"></div>

ngInclude は html 文字列のデータバインディングを許可するため、ngBindHtml は必要ありません。

2 つ目は、ngInclude が新しいスコープを作成するためhtml、親スコープのオブジェクトを介してアクセスしない限り、新しく作成されたスコープ外のプロパティにアクセスしても適切に機能しないことです (たとえば、ng-model="data.html"の代わりにng-model="html".$scope.data = {}親スコープのこの場合、ngInclude スコープ外で html にアクセスできるようにするもの。

( ngModels で常にドットを使用する必要がある理由の詳細については、この回答を参照してください。)

編集

ご指摘のとおり、サービスを使用して HTML を返す場合、ngInclude オプションはあまり役に立ちません。

上記の David のコメントのように、$compile を使用するディレクティブ ベースのソリューションで編集されたプランカーを次に示します。

関連する追加：

app.directive('customHtml', function($compile, $http){
  return {
    link: function(scope, element, attrs) {
      $http.get('template.html').then(function (result) {
        element.replaceWith($compile(result.data)(scope));
      });
    }
  }
})
于 2013-11-08T21:38:02.337 に答える
6

サラの答えに基づいて、ディレクティブを配置する構造を作成しました

.directive('dynamic', function(AmazonService, $compile) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      AmazonService.getHTML()
     .then(function(result){
       element.replaceWith($compile(result.data)(scope));
     })
     .catch(function(error){
       console.log(error);
     });
   }
 };
});

そしてhtmlで：

<dynamic></dynamic>

サラに感謝します。

于 2014-07-22T20:45:31.320 に答える
0

いくつかのng-repeatを含む動的テーブルがあり、1つの列にjavascriptコールバック関数を入力しようとすると、次のようなhtmlテキストで表示されます

<td class="tableList_"+myValue> "span class=someclass> some_text /span>" </td>
<td class="tableList_"+myValue> "span class=someclass> some_text /span>" </td>
<td class="tableList_"+myValue> "span class=someclass> some_text /span>" </td>

だから私はjqueryで私の問題を解決しました：

$(".tableListFilas td").each(function() {
    var td_class = $(this).attr("class");

    if(td_class == 'tableList_'+titulo)
    {
         var toExtraHtml = $(this).text();
         $(this).html(toExtraHtml);
    }
});

その後、最終的な出力は良好でした：

<td class="tableList_COLORS"> <span class=someclass>some_text</span> </td>
<td class="tableList_COLORS"> <span class=someclass>some_text</span> </td>
<td class="tableList_COLORS"> <span class=someclass>some_text</span> </td>
于 2016-05-13T13:02:07.627 に答える