AngularJS使用JavaScript将指令动态添加到DOM

Question

I am developing a small chat application using Angular 1.x and Socket.io. There is a list showing available people for chatting on the screen. When clicked on a person, in the controller a chat function called. I pass the required person info (id, socket_id etc.). Then I create a chat box like facebook chat box with directive dynamically and add to dom. Directive has an isolated scope. This is code to add directive to DOM when clicked on a person:

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);

And the directive code:

.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. Problem: I am facing problem getting object data (receiver = temp) in the directive and apply to view. How can I send an object data and handle in directive properly?
2. Problem: After creating a chat box for a person, I want to prevent creating a second chat for the same person. How can I handle this?

Answer 1

In AngularJS, avoid raw DOM manipulation. DOM manipulation should be done only by directives:

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

In the directive use one-time < binding to put objects in the isolate scope and use expression & binding to communicate a close event from the directive:

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();
            }
        }
    }
})

In this case the visibility of the element is controlled by the ng-show directive .