AngularJS使用JavaScript將指令動態添加到DOM

Question

我正在使用Angular 1.x和Socket.io開發一個小型聊天應用程序。 屏幕上會顯示一個列表，其中列出了可以聊天的人。 當單擊某個人時，在控制器中稱為聊天功能。 我傳遞了所需的人員信息（id，socket_id等）。 然后，我使用指令動態創建一個聊天框（如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. 問題：我在獲取指令中的對象數據（接收器=臨時）並將其應用於視圖時遇到問題。 如何發送對象數據並正確處理指令？
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>

在指令中，使用一次性<綁定將對象置於隔離范圍內，並使用表達式&綁定來傳遞指令中的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指令控制 。