AngularJS使用JavaScript動態地向DOM添加指令

我正在開發一個使用Angular 1.x和Socket.io的小型聊天應用程序。有一個列表顯示可用於在屏幕上聊天的人員。當點擊一個人時，在控制器中一個聊天功能被調用。我通過所需的人員信息（id，socket_id等）。然後，我創建一個聊天框像動態指令Facebook聊天框並添加到DOM。指令有一個孤立的範圍。這是代碼指令添加到DOM對一個人當點擊：AngularJS使用JavaScript動態地向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; 
      } 
     } 
    } 
})

問題：我現在面臨的問題越來越對象數據（接收器= TEMP）在該指令適用於查看。如何正確發送對象數據和處理指令？
問題：創建一個人的聊天框後，我想阻止爲同一個人創建第二個聊天。我該如何處理？

來源

2017-07-30 Murat Topçu

在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>

在指令中使用的一次性<結合把對象的分離範圍和使用表達&結合，從指令傳達close事件：

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控制。

來源

2017-07-30 16:50:53 georgeawg

AngularJS使用JavaScript動態地向DOM添加指令

回答

相關問題