javascript – 具有隔离范围的Angularjs指令需要澄清
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 具有隔离范围的Angularjs指令需要澄清，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4288字，纯文字阅读大概需要7分钟。
内容图文
编辑：
这个plunker有一个功能性的例子：
http://plnkr.co/edit/GFQGP0q3o9RjLAlRANPS?p=preview
外部范围有$scope.name =’唐纳德’
所有指令都声明为：
<directive-name binding="name">
这是一个多部分的问题.我试图更好地理解具有监视或绑定到外部范围变量的孤立范围.
使用非隔离范围指令,一切都可以正常工作：
// [WORKS]
.directive('noScopeWithWatch', function(){
return {
restrict: 'E',
link: function(scope, lElement, attrs) {
scope.$watch(attrs.binding, function(name){
lElement.text('Hello ' + name);
});
}
};
})
// returns Hello Donald
令人困惑的部分是当我试图隔离范围并保持绑定时.所以我要求的是澄清为什么下面的一些例子有效,而有些则没有.
如果我只是使用“普通”绑定添加范围隔离,则会失败：
// 1. [FAILS]
.directive('scopeWithWatch', function(){
return {
restrict: 'E',
link: function(scope, lElement, attrs) {
scope.$watch(attrs.binding, function(name){
lElement.text('Hello ' + name);
});
},
scope: { // new content
binding: '=' // new content
} // new content
};
})
// returns Hello undefined
但是,将watch中的绑定变量用作字符串可使其工作：
// 2. [WORKS]
.directive('scopeWithWatchString', function(){
return {
restrict: 'E',
link: function(scope, lElement, attrs) {
scope.$watch('binding', function(b){ // new content
lElement.text('Hello ' + b);
});
},
scope: {
binding: '='
}
};
})
// returns Hello Donald
使用绑定变量作为对象失败时失败：
// 3. [FAILS]
.directive('scopeWithWatchObject', function(){
return {
restrict: 'E',
link: function(scope, lElement, attrs) {
scope.$watch(binding, function(b){ // new content
lElement.text('Hello ' + b);
});
},
scope: {
binding: '='
}
};
})
// Does not work at all
// Console output - ReferenceError: binding is not defined
尝试在孤立范围内引用绑定变量也不起作用,但至少不会导致异常：
// 4. [FAILS]
.directive('scopeWithWatchScopeObject', function(){
return {
restrict: 'E',
link: function(scope, lElement, attrs) {
scope.$watch(scope.binding, function(b){ // new content
lElement.text('Hello ' + b);
});
},
scope: {
binding: '='
}
};
})
// returns Hello undefined
事实证明,在模板中的mustaches中使用绑定变量可以：
// 5. [WORKS]
.directive('scopeWithTemplate', function(){
return {
restrict: 'E',
template: 'Hello {{binding}}', // new content and linker removed
scope: {
binding: '='
}
};
})
// returns Hello Donald
但是尝试将它们用作链接器中的胡须并不是.
// 6. [FAILS]
.directive('scopeWithWatchStringUsingMustashes', function(){
return {
restrict: 'E',
link: function(scope, lElement, attrs) { // new content
scope.$watch('binding', function(){ // new content
lElement.text('Hello {{binding}}'); // new content
}); // new content
}, // new content
scope: {
binding: '='
}
};
})
// returns Hello {{binding}}
以下是plunker：
http://plnkr.co/edit/GFQGP0q3o9RjLAlRANPS?p=preview
(我现在的版本是78,如果你想在答案中使用它,请分叉.)
有人可以向我解释为什么有些例子有效,而有些例子没有.
解决方法:
对此有一个简单的答案,适用于此处的所有示例.关于$compile的Angular文档解释了这一点,但很容易误解.隔离范围的整个目的是创建一个仅由声明它的指令消耗的范围.为此,将创建一个新变量,将该值存储为父作用域的别名.
有三种主要的定义类型：@,=,&
@ or @attr – bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings.
= or =attr – set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute.
& or &attr – provides a way to execute an expression in the context of the parent scope.
@和=之间的唯一区别是双向支持. =定义仍将返回字符串结果.
所以,按顺序,你拥有的是：
>隔离范围不提供对attrs集合的访问,它只能访问它自己的隔离范围项.这不起作用,因为范围中没有attrs对象.
>按预期工作,binding =’name’与绑定匹配：’=’和’binding’可作为隔离范围中的别名访问.
>失败,因为attrs总是字符串,它们不是javascript对象.
>失败,
The ‘isolate’ scope differs from normal scope in that it does not prototypically inherit from the parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope.
>工作,原因与2.绑定正确匹配.模板由$compile自动处理.
>失败,因为lElement.text只是文本.在文本分配中使用表达式需要在将文本发送到dom之前进行额外的手动编译步骤,否则将{{}}表达式视为纯文本.
内容总结
以上是互联网集市为您收集整理的javascript – 具有隔离范围的Angularjs指令需要澄清全部内容，希望文章能够帮你解决javascript – 具有隔离范围的Angularjs指令需要澄清所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。