Question

我正在尝试构建像Facebook这样的JavaScript聊天系统，我使用指令为每个用户创建聊天框，the chatbox

当我点击在线用户时 - 应该打开一个新的聊天框：

$(elm).on('click','[data-user-id]',function () {
    chat.openChatBox( this.dataset.userId , scope ) ; // (chat) :service 
}) ;

app.service('chat',['$http','$interval','$compile',function($http,$interval,$compile) {
   this.openChatBox = function (id , scope ) {

            if($("[data-chatbox-user-id="+id+"]").length === 0){
                $http({
                    method:"POST",
                    url:"{{ url('users/getUserDataForChat') }}",
                    data:{
                        id:id,
                    }
                }).success(function (r) {                       
                    var right = chatService.opened.length * 260 + 230 + "px" ;
                    angular.element('body').append($compile( '<div class="chatBox" name="'+r.name+'" style="right:'+ right +';" chatbox data-chatbox-user-id='+id+' ></div>' )(scope) );

                }) ;
            }
}

}]);

所以，这是实际发生的事情。 click事件会从服务中触发openChatBox()函数。它会搜索是否已存在此用户的聊天框;如果没有，它将创建一个。

问题在于这行代码：

angular.element('body').append($compile( '<div class="chatBox" name="'+r.name+'" style="right:'+ right +';" chatbox data-chatbox-user-id='+id+' ></div>' )(scope) );

我必须通过范围，但我需要使用指令范围。这是chatbox指令：

        app.directive("chatbox",[function () {          
        return {
            restrice:'CAE',
            scope:true,         
            template: function (element,attrs) {
                return $("#templateChatBox").html() ;
            },
            link:function (scope,elm,args) {                    


            },controller : ['$scope',function ($scope) {

                $scope.textChanged = function (e) {
                    console.log($scope.name) ;
                }
            }]
        }
    }]) ;

那么，如果angularJS中的自定义指令都可以使用自己的范围，为什么要将它传递给$compile()？如果指令可以从controller(scope<-)和scope获得所有内容，那会更好。

我的确切问题是：“聊天”服务打开一个新的 chatbox - ＆gt; （通过范围） - ＆gt;然后chatbox es将具有相同的信息，因为它们使用$compile();上传递的相同范围

我该怎么做才能解决这个问题？

Answer 1

传递给openChatBox函数的scope参数仅用于将插入的元素绑定到外部作用域。

    chat.openChatBox( this.dataset.userId , scope );

    //... and later

    angular.element('body').append($compile( '<div class="chatBox" name="'+r.name+'" style="right:'+ right +';" chatbox data-chatbox-user-id='+id+' ></div>' )(scope) );

$compile生成模板函数，然后通过传递新元素应绑定的范围来执行它。关于那个范围的故事在那里结束了。

你的指令共享外部作用域的原因是你设置scope = true，它告诉指令创建一个新的作用域，它将原型继承自其外部作用域。（您传递给模板函数的那个）。

如果您需要指令具有单独的范围，请通过设置scope = {}

来创建隔离范围

角度中的多个指令

1 个答案: