gpt4 book ai didi

angularjs - 对 Angularjs 的嵌入和隔离范围和绑定(bind)感到困惑

转载 作者:行者123 更新时间:2023-12-03 05:50:59 25 4
gpt4 key购买 nike

我正在努力理解模型的范围及其与范围有限的指令的绑定(bind)。

我知道限制指令的范围意味着 controller.$scope 和directive.scope 不再是同一件事。但是,我对在指令模板或 html 中放置模型如何影响数据绑定(bind)感到困惑。我觉得我错过了一些非常基本的东西,要继续前进,我需要理解这一点。

获取以下代码(此处为 fiddle :http://jsfiddle.net/2ams6/)

JavaScript

var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
});
app.directive('testel', function(){
return {
restrict: 'E',
scope: {
title: '@'
},
transclude: true,
template: '<div ng-transclude>'+
'<h3>Template title: {{title}}</h3>' +
'<h3>Template data.title:{{data.title}}</h3>' +
'</div>'
}
});

HTML
<div ng-app='app'>
<div ng-controller="Ctrl">
<input ng-model="data.title">
<testel title="{{data.title}}">
<h3>Transclude title:{{title}}</span></h3>
<h3>Transclude data.title:{{data.title}}</h3>
</testel>
</div>
</div>

模型只更新 {{title}}在模板中,以及 {{data.title}}在嵌入中。 为什么不 {{title}}在嵌入中也没有{{data.title}}在模板中?

像这样将输入移动到嵌入中(这里 fiddle : http://jsfiddle.net/eV8q8/1/):
<div ng-controller="Ctrl">
<testel title="{{data.title}}">
<input ng-model="data.title">
<h3>Transclude title: <span style="color:red">{{title}}</span></h3>

<h3>Transclude data.title: <span style="color:red">{{data.title}}</span></h3>

</testel>
</div>

现在意味着只嵌入 {{data:title}}得到更新。 为什么不是模板 {{title}}{{data.title}} , 也不包含 {{title}} ?

最后,将输入移动到模板中,就像这样(在这里摆弄: http://jsfiddle.net/4ngmf/2/):
template: '<div ng-transclude>' +
'<input ng-model="data.title" />' +
'<h3>Template title: {{title}}</h3>' +
'<h3>Template data.title: {{data.title}}</h3>' +
'</div>'

现在意味着只有模板 {{data.title}}得到更新。 同样,为什么不是其他 3 个绑定(bind)?

我希望有什么明显的东西在盯着我看,我想念它。如果你让我得到这个,我会给你买啤酒,或者给你一些积分,或者其他类似的东西。非常感谢。

最佳答案

在阅读了所有提供的答案后,包括 Mark 的精彩示意图,这是我对范围的理解,并且它是我的问题的继承。我希望能对这张图在哪里下降的评论,以便我可以适本地更新。我希望它只是提供与 Mark 所呈现内容不同的观点:

Scope inheritance

关于angularjs - 对 Angularjs 的嵌入和隔离范围和绑定(bind)感到困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16653004/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com