角度中的多个指令

时间:2016-06-03 01:58:04

标签: javascript angularjs angularjs-directive angularjs-scope

我正在尝试构建像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();上传递的相同范围

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

1 个答案:

答案 0 :(得分:0)

传递给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 = {}

来创建隔离范围