我正在尝试构建像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();
上传递的相同范围
我该怎么做才能解决这个问题?
答案 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 = {}