首页 \ 问答 \ 对Angularjs感到困惑,并分离出范围和绑定(Confused about Angularjs transcluded and isolate scopes & bindings)

对Angularjs感到困惑,并分离出范围和绑定(Confused about Angularjs transcluded and isolate scopes & bindings)

对于范围有限的指令,我正在努力了解模型的范围及其约束力。

我认为限制范围的指令意味着控制器。$ scope和directive.scope不再是同样的事情。 但是,我对于在模板或html中放置模型如何影响数据绑定感到困惑。 我觉得我错过了一些非常重要的事情,而我需要理解这一点。

采取以下代码(fiddle here: 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}}为什么{{title}}在模板中没有{{data.title}}

将输入移动到内插过程中(如下所示: 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绑定?

我希望有一些明显的盯着我的脸,我错过了。 如果你让我得到这个,我会给你买一杯啤酒,或给你一些点,或其他一些这样的东西。 非常感谢。


I am struggling to understand the scope of models and their bindings in respect of directives which have limited scope.

I get that restricting the scope on a directive means that controller.$scope and directive.scope are no longer the same thing. However, I am confused about how the placing of models either within the directive template or in the html affects data binding. I feel I'm missing something very fundamental and to move on I need to understand this.

Take the following code (fiddle here: 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>

The model only updates {{title}} within the template, and {{data.title}} in the transclusion. Why not {{title}} in the transclusion nor {{data.title}} in the template?

Moving the input to within the transclusion like so (fiddle here: 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>

now means only transclude {{data:title}} gets updated. Why not either template {{title}} or {{data.title}}, nor transclude {{title}}?

And finally, moving the input to within the template, like so (fiddle here: 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>'

Now means that only template {{data.title}} gets updated. Again, why not the other 3 bindings?

I hope there is something obvious staring me in the face and I'm missing it. If you get me to get this, I'll buy you a beer, or give you some points, or some other such thing. Many thanks.


原文:https://stackoverflow.com/questions/16653004
更新时间:2019-07-02 03:24

相关问答

更多

从transclude范围角度改变父模型(Angular changing parent model from transclude scope)

当您使用对象绑定到模型时,您的对象将作为引用传递到不同的范围,而不是副本, Javascript对象将作为引用传递给函数。 在这种情况下,它仍将参考先前的范围。 When you use an object to bind to the model, your object is passed to the different scope as an reference, not a copy, in Javascript objects are passed to functions as a ...

使用动态的模块集开发AngularJS应用程序(Developing an AngularJS app with dynamic set of modules)

这些只是一般的建议。 我应该如何设计我的应用程序和小部件 - 如果我有一个单独的AngularJS模块或每个小部件应该是主模块的指令? 你正在谈论小部件的hundres,将它们分成几个模块似乎很自然。 一些小部件可能与其他小部件有更多的共同之处。 有些可能非常普遍,适合其他项目,其他项目更具体。 如果我设计我的小部件作为指令,是否有一种方法来定义指令中的依赖关系。 那么我的指令使用ng-calender来实现呢? 与其他模块的依赖关系在模块级别完成,但是如果模块A依赖于模块B ,则A和B依赖于模块 ...

AngularJS:如果元素具有ngModel和自定义指令,则双向数据绑定失败(AngularJS: Two way data binding fails if element has ngModel and a custom directive)

问题是你的errorMessage指令使用隔离作用域。 隔离范围会影响整个元素 ,因此ngModel指令正在隔离范围内进行评估 - 显然无法工作 - 该模型位于父范围内。 我不确定你为什么在这里建立隔离范围。 由于您正在尝试创建一个必须与其他指令交互的组件,隔离范围并不是最佳选择。 由于errorMessage不会影响当前范围,因此您可能不需要任何已定义的范围,但是如果您愿意,可以使用子范围。 看看这里阅读更多关于何时使用指令的每种类型的作用域。 The problem is that your ...

了解Angularjs范围的Kendo UI对话框(Understanding Kendo UI dialog with Angularjs scopes)

使用点表示法在多个范围之间共享对象。 我已经更新了你的jsbin 编辑 当您写入基本类型时,将在您的kendo指令范围内创建一个新实例,而不是在控制器范围内。 这种问题与原始类型有关。 如此处所述 通过遵循始终具有'。'的“最佳实践”,可以轻松避免与原语的这个问题。 在您的ng模型中。 Use dot notation to share an object between multiple scopes. I have updated your jsbin EDIT When you write ...

在aurelia应用中的范围(Scopes in aurelia application)

我刚刚尝试了aurelia的入门应用程序,并注意到在两个浏览器(chrome和ff)中打开时,它将导航保持同步。 gulp任务包括一个导航同步插件,可让您在多个浏览器中保持应用程序的打开状态,并根据您在其他浏览器中的行为刷新每个浏览器。 它看起来像路由器实例驻留在应用程序范围内。 我没有在文档中找到关于范围的任何信息,所以问题在于aurelia中的范围 这取决于对象。 一般来说,你创建它们。 Aurelia的所有不同部分通常都是按照es6类来处理的。 你可以使用static metadata方法来 ...

绑定和绑定之间的区别(Difference between binding and with-bindings)

当您需要动态选择要绑定的内容时,使用绑定是非常有用的。 这是一个有趣的例子,我们随机选择要绑定的内容: user> (def ^:dynamic a) #'user/a user> (def ^:dynamic b) #'user/b user> (binding [a 1 b 2] (+ a b)) 3 user> (with-bindings (if (rand-nth [true false]) { ...

Angularjs $ q.all(Angularjs $q.all)

在javascript中,没有block-level scopes只有function-level scopes : 阅读这篇关于javaScript范围和提升的文章。 看看我如何调试你的代码: var deferred = $q.defer(); deferred.count = i; console.log(deferred.count); // 0,1,2,3,4,5 --< all deferred objects // some code .success(function(dat ...

AngularJS与Spring-mvc [关闭](AngularJS with Spring-mvc [closed])

两例: 您的架构是完全客户端的:在这种情况下,集成非常自然。 Spring MVC将您的服务作为REST(JSON / XML)公开,您的AngularJS客户端应用程序将消耗您的JSON。 这里,.war应用程序(Spring MVC)必须部署在servlet容器(例如Tomcat)中,您的客户端应用程序可以部署在同一台服务器或像Nginx或Apache这样的HTTP服务器中。 您希望在服务器端保留页面生成,并且只能使用AngularJS进行某些DOM操作,因此您的代码必须部署在同一个.war( ...

相关文章

更多

最新问答

更多
  • Android宽度:100%修复(网站接管问题)(Android width:100% fix (website takeover issue))
  • C ++函数/方法设计的良好实践(Good practice in C++ function/method design)
  • 计算其他表中不存在的所有记录 - SQL查询(Count all records that does not exist to other table - SQL Query)
  • 为什么我要用JPA共享ID?(Why do I get shared Ids with JPA?)
  • asp.net - 如何显示来自html格式的数据行的字段(asp.net - how to display a field from data row that is in html format)
  • 我们如何使用ActiveRecord从连接表中删除行?(How can we delete rows from a join table by using ActiveRecord?)
  • ng-class搞乱了类的顺序(ng-class messing with the order of classes)
  • oracle 12g无效数字错误(oracle 12g invalid number error)
  • 更改ng-src值onclick(Change ng-src value onclick)
  • 如何在android中自动添加自定义依赖项以创建新项目?(How to add custom dependencies automatically in android for ever a new project is created?)
  • datetime函数在PHP中(datetime function in php)
  • 在javascript中获取会话数组的值(in javascript get the value of a session array)
  • 如何在UTF8中编译LaTeX?(How can I compile LaTeX in UTF8? [closed])
  • Rspec:“array.should == another_array”,但不用担心订单(Rspec: “array.should == another_array” but without concern for order)
  • Logcat错误:无法在android片段中加载视图(Logcat error: unable to load view in android fragments)
  • JavaFX的。(JavaFX. Adding items to the list in different threads is not working)
  • 从GDATA日历资源迁移到Google Calendar Resource api(Migrate from GDATA calendar resource to Google Calendar Resource api)
  • SSRS 2008 - 以零情景处理分割(SSRS 2008 - Dealing with division by zero scenarios)
  • 我如何以编程方式添加一个listView列标题的点击事件(How can I add a listView column header a click event programmatically)
  • Wxpython:无法检索有关列表控件项XXX的信息(Wxpython: Couldn't retrieve information about list control item XXX)
  • 使用Tortoise SVN在SVN存储库中移动目录(Move Directory across SVN repository using Tortoise SVN)
  • 天蓝色服务结构集群中的web api无状态服务是否在一段时间不活动后进入休眠状态?(Do web api stateless services in azure service fabric cluster go to sleep after a period of inactivity?)
  • 我可以设置intelliJ来突出显示PHP编码风格吗?(Can I set intelliJ to highlight php coding style?)
  • 用javafx创建一个Truetype字体文件(Creating a Truetype Font file with javafx)
  • Spring ftp配置错误(Spring ftp configuration is wrong)
  • 使用gsub去除多个字符(Using gsub to strip multiple characters)
  • 续订推送证书并保持当前的App Store App正常工作(Renew Push certificate and keep current App Store App working)
  • js:ES5和ES6之间关于'this'关键字用法的一个令人困惑的观点(js: one confusing point about 'this' keyword usage between ES5 and ES6)
  • window.onload vs $(document).ready()(window.onload vs $(document).ready())
  • 在Swift中,如何声明一个符合一个或多个协议的特定类型的变量?(In Swift, how can I declare a variable of a specific type that conforms to one or more protocols?)