javascript - Angular 中的多个指令

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 -> (传递范围) -> 然后 chatbox es 将具有相同的信息，因为它们使用在 $compile(); 上传递的相同范围。

我可以做什么来解决这个问题？

Answer 1

传递给 openChatBox 函数的范围参数仅用于将插入的元素绑定(bind)到外部范围。

    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 生成模板函数，然后通过传递新元素应绑定(bind)到的范围来执行它。关于该范围的故事实际上到此结束。

指令共享外部作用域的原因是您设置了 scope = true，这告诉指令创建一个新作用域，该新作用域将从其外部作用域原型(prototype)继承。 (您传递给模板函数的那个​​)。

如果您需要指令具有单独的作用域，请通过设置 scope = {} 创建一个独立的作用域