AngularJS JavaScriptを使用してDOMに動的に命令を追加する

Question

Angular 1.xとSocket.ioを使用して小さなチャットアプリケーションを開発しています。利用可能な人が画面上でチャットを行うことを示すリストがあります。人をクリックすると、コントローラ内でチャット機能が呼び出されます。私は必要な人の情報（id、socket_idなど）を渡します。その後、私はdirectbookを使ってfacebookチャットボックスのようなチャットボックスを動的に作成し、domに追加します。ディレクティブは独立したスコープを持ちます。これは、人の上にクリックしたときにDOMにディレクティブを追加するコードです：

temp = { 
'name' : driver.name, 
'surname' : driver.surname, 
'image' : driver.image 
}; 
var divElement = angular.element(document.querySelector('.chat-container')); 
var appendHtml = $compile('<chat-box receiver="' + temp + 
     '" id="' + driver.id + '" visible="true"></chat-box>')($scope); 
divElement.append(appendHtml); 

そして、ディレクティブコード：

.directive('chatBox', function($timeout) { 
    chatboxes = []; 
    return { 
     restrict : 'EA', 
     templateUrl : 'templates/chat.box.tpl.html', 
     replace : true, 
     scope : { 
      receiver : '@', 
      visible : '@', 
      id : '@' 
     }, 
     link: function(scope, element, attrs) { 

     }, 
     controller : function($scope) { 


      $scope.close = function() { 
       $scope.visible = false; 
      } 
     } 
    } 
}) 

1. 問題：私は（レシーバ= TEMP）オブジェクトデータを取得し、問題に直面していますその指示文を見て適用する。どのようにオブジェクトデータを送信し、ディレクティブで適切に処理できますか？
2. 問題：ある人のチャットボックスを作成した後、同じ人の2番目のチャットを作成しないようにしたい。これをどうすれば処理できますか？

Answer 1

AngularJSでは、生のDOM操作を避けてください。 DOM操作にのみディレクティブによって行われるべきである：ディレクティブの使用では

<div class="chat-container"> 
    <chat-box ng-show="$ctrl.visible" 
      receiver="$ctrl.temp" 
      id="{{$ctrl.driver.id}}" 
      on-close="$ctrl.visible = false"> 
    </chat-box>' 
</div> 

ワンタイム<は、分離株のスコープ内のオブジェクトを入れて、指令から近いイベントを伝達するためにバインディング式&を使用するバインディング：

app.directive('chatBox', function() { 
    return { 
     restrict : 'EA', 
     templateUrl : 'templates/chat.box.tpl.html', 
     scope : { 
      receiver : '<', 
      onClose : '&', 
      id : '@' 
     }, 
     link: function(scope, element, attrs) { 

     }, 
     controller : function($scope) { 

      $scope.close = function() { 
       $scope.onClose(); 
      } 
     } 
    } 
}) 

この場合、要素の可視性はng-show directiveによって制御されます。