[英]Multiple directives in angular
I am trying to build a JavaScript chat system like Facebook and I use a directive to create the chatbox for every user, the chatbox 我正在尝试构建像Facebook这样的JavaScript聊天系统,我使用指令为每个用户(聊天框)创建聊天框
When I click on online users -- a new chatbox should be opened: 当我点击在线用户时 - 应该打开一个新的聊天框:
$(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) );
}) ;
}
}
}]);
So, here is what actually happens. 所以,这是实际发生的事情。 The
click
event triggers the openChatBox()
function from the service. click
事件从服务触发openChatBox()
函数。 It searches to see if there is already a chatbox that exists for this user; 它会搜索是否已存在此用户的聊天框; if not, it will create one.
如果没有,它将创建一个。
The problem is with this line of code: 问题在于这行代码:
angular.element('body').append($compile( '<div class="chatBox" name="'+r.name+'" style="right:'+ right +';" chatbox data-chatbox-user-id='+id+' ></div>' )(scope) );
I have to pass the scope, but I need to use the directive scope. 我必须通过范围,但我需要使用指令范围。 This is the
chatbox
directive : 这是
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) ;
}
}]
}
}]) ;
So, if the custom directives in angularJS can each use their own scope, why should I pass it to $compile()
? 那么,如果angularJS中的自定义指令都可以使用自己的范围,为什么要将它传递给
$compile()
? It would be better if the directive could get every things from their controller(scope<-)
, and scope
. 如果指令可以从它们的
controller(scope<-)
和scope
获得所有东西会更好。
My exact problem is this: the "chat" service open a new chatbox
-> (passes the scope ) -> and then the chatbox
es will have the same information, because they use the same scope passed on the $compile();
我的确切问题是:“聊天”服务打开一个新的聊天
chatbox
- >(传递范围) - >然后聊天chatbox
es将具有相同的信息,因为它们使用在$compile();
上传递的相同范围$compile();
What can I do to fix this? 我该怎么做才能解决这个问题?
The scope argument that you pass to the openChatBox
function is only used to bind the inserted element to an outer scope. 传递给
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
produces the template function and then you execute it by passing the scope that the new element should be bound to. $compile
生成模板函数,然后通过传递新元素应绑定的范围来执行它。 The story about that scope literally ends there. 关于那个范围的故事在那里结束了。
The reason why your directive is sharing the outer scope is that you set scope = true
, which tells the directive to create a new scope which will prototypicaly inherit from its outer scope. 您的指令共享外部作用域的原因是您设置了
scope = true
,它告诉指令创建一个新范围,该范围将原型继承自其外部范围。 (the one you passed to the template function). (您传递给模板函数的那个)。
If you need your directive to have a separate scope, create an isolated scope by setting scope = {}
如果您需要指令具有单独的范围,请通过设置
scope = {}
创建隔离范围
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.