AngularJS with MVCは、動的にHTMLを取得し、ボディに追加し、コントローラをバインドします。

Question

jQueryの背景でAngularJSを初めて使用しています。私は単純な仕事になると思ったので、私はそれがますます難しくなると思っています。私は動的にhtmlを追加してコントローラにバインドする方法を見てきましたが、私の特定の状況を見つけられませんでした。

これは私が達成しようとしているものです。私は簡単なダイアログボックスでこれを簡単に保ちたいと思うでしょう。基本的に、自分のカスタムダイアログボックスを作成したいとします。ボタンクリックに基づいていると仮定します。「はい、いいえ、キャンセル」ボタンを使用して「本当にそうしたいですか？」というメッセージを表示したいと思います。その後、ボタンのクリックに基づいて、私は特定の操作を実行したい、Windows開発のユーザーはこれに精通しています。

まず、クリックしたボタンに基づいて自分のメッセージとダイアログボックスのHTMLを作成し、その出力HTMLを絶対位置として文書本体に追加してから、文書本体からhtmlを削除します。 jQueryので

私は単に私が単に角度方法はこれを行う方法を理解することはできません。この

...somewhere in code 
var html = "<div id='123' class='dialog-box'><button id='yesButton'></button> 
...elements for no and cancel</div>"; 
DisplayDialog("123", html); 
... 

function DisplayDialog(elementId, html) { 
    $(document.body).append(html); 
    var dElement = $(document.body).find("#" + elementId); 
    $(dElement).find("#yesButton").on("click" function() { 
     ...code 
     $(dElement).remove(); 
    }); 
    ...code for no, and cancel events 
} 

を行うことができます。基本的には、htmlを取得したり、別の場所（本文やdiv要素など）に追加したり、$ scopeを使ってHTMLと対話できるようにしたいと考えています。私はこれを理解していれば分かりましたが、MVCアプリケーションで部分的なビューを取得してdivに追加する必要があるはるかに複雑な操作にも適用できます

Answer 1

かなり簡単です

var myEl = angular.element(document.querySelector('#divID')); 
myEl.append('Hi<br/>'); 

https://docs.angularjs.org/api/ng/function/angular.element

別の方法：

あなたはその後、HTMLでNG-バインドを使用して$に設定あなたはjqueryの背景を与えられたため、角度、これはハードにすべきではありません範囲変数HTMLをesents：

<div ng-bind-html="divHtmlVar"></div> 

$scope.divHtmlVar = '<b>main html</b>'; 

関連するブログポスト：

http://blog.sodhanalibrary.com/2014/08/append-or-prepend-html-to-div-using.html