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

问题：我在指令中获取对象数据（receiver = temp）时遇到问题并应用于视图。如何正确发送对象数据和处理指令？
问题：为某人创建聊天框后，我想阻止为同一个人创建第二个聊天。我怎么处理这个？

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

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

1 个答案: