動的な HTML と Angular を含むページの最適なアプローチは何ですか? つまり、検索結果を表示するために DataTables.net を使用しており、Angular を使用して各セルを編集できる必要があります。もちろん、その HTML は、検索が実行された後に作成され、Angular はすでに hmlt をそのスコープにバインドしているため、Angular ではバインドされません。
1 に答える
angularでDOM操作を行おうとしているようです。この場合、Angular はおそらく最適なツールではありません。Vanilla.js や jQuery ライブラリのようなものが適しています。
動的にロードされた HTML 内に本当に関連するアプリケーションがある場合、最良の方法は、HTML をマークアップしてアプリを含め、手動でangular.bootstrapを呼び出すことです。手動でブートストラップするので、アプリのネストについて心配する必要はありません。
AngularJS の別の ng-app 内で 1 つの ng-app を使用できますか
http://docs.angularjs.org/api/ng/directive/ngApp
HTML ドキュメントごとに自動ブートストラップできる AngularJS アプリケーションは 1 つだけです。ドキュメントで最初に見つかった ngApp は、アプリケーションとして自動ブートストラップするルート要素を定義するために使用されます。HTML ドキュメントで複数のアプリケーションを実行するには、代わりに angular.bootstrap を使用して手動でブートストラップする必要があります。
angular.module('HelloApp',[])
.controller('HelloController',[function(){
var helloController = this;
helloController.helloWorld = 'Hello World!';
}]);
setTimeout(function(){
document.getElementById('insertHere').innerHTML =
'<div ng-app="HelloApp" ng-controller="HelloController as helloController">{{helloController.helloWorld}}</div>';
angular.bootstrap(document, ['HelloApp']);
},5000)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="insertHere">
Loading in 5 seconds
</div>
すでに実行中のアプリを利用しようとしている場合、私が考えることができる唯一の方法は、Angular の外部から $rootScope にアクセス/更新することです。これは、回答で説明されている理由から悪いことです。