一度クリックするとサービスを呼び出してデータを返す複数のタブを含むタブページがあります。そのデータの一部は 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>