JSONのバインディングhtmlをAngular.jsで使用すると、オプション値を選択するとnullが返されます

Question

カスタムディレクティブを使用してJSONとして保存されたHTMLフォームをビューテンプレートに動的にバインドします。

このHTMLは、選択タグと、ng-repeatを使用して動的に生成され、ng-modelを使用して設定されたユーザーのモデルで構成されます。 HTMLと

JSON：：

問題は、selectタグからバインドされたデータは、バックヌルここ

として来て全体のモデル - ビュー - コントローラの設定であるということです

{"location":"<input class='form-control' type='text' placeholder='City' ng-model='model.location.city'/><select class='form-control' ng-model='model.location.state'><option value=''>State</option><option ng-repeat='(k, val) in states' value='{{k}}'>{{val}}</option></select>"} 

。これに対処する：

<input class='form-control' type='text' placeholder='City' ng-model='model.location.city'/> 

<select class='form-control' ng-model='model.location.state'> 
    <option value=''>State</option> 
    <option ng-repeat='(k, val) in states' value='{{k}}'>{{val}}</option> 
</select> 

ビューテンプレート：

.directive('bindHtmlCompile', ['$compile', function ($compile) { 
    return { 
    restrict: 'AE', 
    link: function (scope, element, attrs) { 
     scope.$watch(function() { 
     return scope.$eval(attrs.bindHtmlCompile); 
     }, function (value) { 
     element.html(value && value.toString()); 
     var compileScope = scope; 
     if (attrs.bindHtmlScope) { 
      compileScope = scope.$eval(attrs.bindHtmlScope); 
     } 
     $compile(element.contents())(compileScope); 
     }); 
    } 
    }; 
}]); 

コントローラ&モデル

.controller('testCtrl', function($scope, $http, $state, $sce){ 

    $scope.model = { 

     location : { 
      city:'', // this works fine! 
      state:'' // this comes back as null 
     } 
    }; 

    $http.get('html_form.json').then(function(res){ 

     $scope.html_from_json = $sce.trustAsHtml(res.data['location']); 

     $scope.getdata = function(){ 

      console.log($scope.model); 

     }; 

    }); 
}); 

：バインディングをやっ

<div bind-html-compile="html_from_json"> 
<!-- to be filled with HTML from JSON file --> 
</div> 
<button ng-click="getdata()">get form data</button> 

指令

「ニューヨーク」は「都市」フィールドに入力され、与えられた状態が選択されたときにこれがログに出力されます：

私が直接ビューにHTMLフォームを入れた場合（ありませんJSONからプルする）すべて正常に動作します。 JSON文字列からデータを取得することが、この問題の原因となっているようです。

はさらに不思議なこと、次

console.log($scope.model.location); 

選択状態を返しますが、DEVコンソールでオブジェクトを拡大、またはデータを使用しようとすると、nullに解決ありません。

これを引き起こしている可能性があり、解決方法を知っている人はいますか？

--UPDATE--

私は非オブジェクトの値にJSONのHTMLのためにNG-モデルを設定することにより、この問題を回避できることがわかりました。例：

<select ng-model="state"></select> <!-- this works --> 

<select ng-model="location.state"></select> <!-- this returns null --> 

その後、私はちょうど戻って私のコントローラでモデルに値を養う：

$scope.model.location.state = $scope.state; 

しかし、これはちょっと、粗です。私はまだ問題が何かを知りたいです。

Answer 1

以下のこのコードを使用してください。選択オプションでng-repeatを使用することは、そのためのng-optionsがあるため、良い方法ではありません。

<select class='form-control' ng-model='model.location.state' ng-options='k as val for (k, val) in states'> 
</select> 

かもしれませそれは運のベスト:)