我有一个指令与一个隔离范围(所以我可以在其他地方重复使用指令),当我使用这个指令与ng-repeat,它不能工作。

我已经阅读所有的文档和Stack Overflow关于这个主题的答案,并了解问题。我相信我已经避开了所有常见的陷阱。

所以我理解我的代码失败,因为ng-repeat指令创建的范围。我自己的指令创建一个隔离范围,并且双向数据绑定到父范围中的一个对象。我的指令将分配一个新的对象值到这个绑定的变量,当我的指令使用没有ng-repeat(父变量正确更新)时,这工作完美。然而,使用ng-repeat,该赋值在ng-repeat范围中创建一个新变量,父变量不会看到该变化。所有这一切都是基于我已经阅读的预期。

我也读过,当一个给定的元素有多个指令时,只创建一个作用域。并且可以在每个指令中设置优先级以定义应用指令的顺序;指令按优先级排序,然后调用其编译函数(在http://docs.angularjs.org/guide/directive处搜索字优先级)。

所以我希望我可以使用优先级,以确保我的指令运行第一,并最终创建一个隔离范围,当ng-repeat运行时,它重新使用隔离范围,而不是创建范围,原型继承父范围。 ng-repeat文档声明该指令运行在优先级1000.不清楚1是较高优先级还是较低优先级。当我在我的指令中使用优先级1,它没有什么区别,所以我试过2000年。但是这使事情更糟:我的双向绑定变得未定义,我的指令不显示任何东西。

我创建了a fiddle to show my issue.我已经注释掉了我的指令中的优先级设置。我有一个名称对象的列表和一个名为name-row的指令,显示名称对象中的名字和姓氏字段。当单击显示的名称时,我希望它在主作用域中设置一个选定的变量。名称数组,所选变量使用双向数据绑定传递给名称 – 行伪指令。

我知道如何通过调用主作用域中的函数来使这个工作。我也知道,如果选择是在另一个对象,我绑定到外部对象,事情会工作。但我目前对这些解决方案不感兴趣。

相反,我有的问题是:

>如何防止ng-repeat创建一个范围,从原型继承父范围,而是使用我的指令的隔离范围?
>为什么优先级2000在我的指令不工作?
>使用Batarang,是否有可能知道使用什么类型的范围?

好吧,通过上面的很多评论,我发现了混乱。首先,两点澄清:

> ngRepeat不会影响您选择的隔离范围
>传递给ngRepeat以在指令的属性上使用的参数使用原型继承的作用域
>您的指令不起作用的原因与隔离范围无关

这里有一个相同的代码示例,但指令删除:

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

这里是一个JSFiddle,表明它不会工作。您获得的结果与您的指令完全相同。

为什么不工作?因为AngularJS中的范围使用原型继承。在父作用域上选择的值是一个基本。在JavaScript中,这意味着当子项设置相同的值时,它将被覆盖。在AngularJS范围中有一个黄金规则:模型值应该总是有一个。在他们中。也就是说,它们不应该是原语。有关详细信息,请参阅this SO answer。

这里是一个图片的范围初始看起来像。

单击第一项后,范围现在如下所示:

注意,在ngRepeat范围上创建了一个新的选定属性。控制器范围003未更改。

你可能猜到当我们点击第二个项目时会发生什么:

所以你的问题实际上不是由ngRepeat引起的 – 它是由打破AngularJS的黄金规则造成的。修复它的方法是简单地使用一个对象属性:

$scope.state = { selected: undefined };
<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

这里是一个second JSFiddle显示这个作品太。

下面是最初的范围:

单击第一项后:

这里,根据需要影响控制器范围。

此外,为了证明这将仍然与你的指令隔离范围(因为,这与你的问题无关),这里是一个JSFiddle也是这样,视图必须反映该对象。你会注意到,唯一必要的改变是使用对象而不是原始。

范围最初:

点击第一项后的范围:

总结:再次,你的问题不是隔离范围,它不是如何ngRepeat工作。你的问题是,你打破了一个已知的规则,导致这个问题。 AngularJS中的模型应该总是有一个..

指令隔离范围与AngularJS中的ng-repeat范围的更多相关文章

  1. iOS推送通知优先级

    我已设置推送通知并正常工作,但是,有时我会遇到终端设备上的延迟交付.有没有办法我可以将推送的“优先级”键设置为10,以便立即发送推送?

  2. ios – 何时使用Semaphore而不是Dispatch Group?

    我会假设我知道如何使用DispatchGroup,为了解问题,我尝试过:结果–预期–是:为了使用信号量,我实现了:并在viewDidLoad方法中调用它.结果是:从概念上讲,dispachGroup和Semaphore都有同样的目的.老实说,我不熟悉:什么时候使用信号量,尤其是在与dispachGroup合作时–可能–处理问题.我错过了什么部分?

  3. 如何使用Xcode的自动布局调整视图大小

    解决方法在写这个问题时,我意识到了诀窍是什么:在NSPopUpButton的大小检查器中,我不得不降低内容拥抱优先级.显然,这可以控制视图“拥抱”其内容的紧密程度.因此,当拥抱优先级高于调整大小优先级时,视图将不希望增加其大小,因为这意味着其边界与其内容之间具有更多的空白空间.然后在我的特殊情况下,我也可以将两个NSPopUpButtons固定为具有相同的宽度和vo:popUpButtons将完美地调整大小,同时保持间距不变.

  4. ios – 默认的自动布局内容拥抱和内容压缩阻抗优先级值是什么?

    我正在尝试调试自动布局问题,并且知道内容拥抱和内容压缩阻力优先级的默认值将有所帮助.这些是什么?它们是否特定于特定组件?我可以使用常量来引用它们吗?

  5. ios – 为自定义创建的串行异步队列设置优先级

    如何使用GCD为自定义创建的串行异步队列设置高优先级?如果是这样,什么是替代解决方案?解决方法您的队列仍然是串行的.它只会在高优先级全局并发后台队列的一个插槽中一次执行一项任务.一旦创建,串行队列就不能以任何方式“并发”.同样,如果您创建并发队列并将其设置为以串行队列为目标,则它实际上变为串行.这一切都在manpage中有所涉及.

  6. iOS 9中UILabel中的多行文本

    我正在开发iOS项目但是当我更新到iOS9时,我在UILabels中遇到了多线问题.我正在使用Autolayout.有谁知道如何在iOS9中做到这一点?如果是这样,那么问题可能是标签内容压缩阻力优先级太低,尝试将其设置为required或1000.内容压缩阻力告诉视图引擎您的标签可以缩小的优先级.将其设置为必需会强制它不缩小.在InterfaceBuilder中,只需选择标签,点击SizeInspector(小标尺),然后将其更改为1000.或者,在代码中,等价物将是:

  7. ios – AutoLayout修改约束

    我发现Autolayout有点困难,所以任何帮助都会非常感激解决方法嗨,你可以做2套约束:>1以优先级高管理您的四视图>1以优先级低管理全屏在点击按钮时调用的方法中,将优先级设置为全屏约束,将优先级设置为四视图约束.

  8. Swift 运算符重载

    但是现在还有另外一个Swift的特性,你应该知道并且会爱上它,它就是运算符重载。例如:我们在SwiftSpriteKitutilitylibrary代码中使用运算符重载去讲多个CGPoints对象相加,例如下面代码:1234letpt1=CGPointletpt2=CGPointletpt3=pt1+pt2letpt4=pt3*100方便吧?当一个人查看你的代码,他们希望操作符的默认行为,这时候运算符重载会使他们迷惑。幸运的是Swift让你能够定义属于你自己的自定义的运算符。

  9. Swift学习一:自定义运算符 operator

    自定义运算符仅能包含这些字符:运算符位置:运算符其他配置范例

  10. [翻译]Swift编程语言——高级操作符

    高级操作符在前面的基本操作符之外,为了做更复杂的值操作,Swift还提供了若干高级操作符。不同于C中的算术操作符,Swfit中的算术操作符不会默认溢出。Swift使得为这些自定义的类型量身打造标准操作符的实现变得很轻松。预定义操作符没有任何限制,Swift提供了定制中缀、前缀、后缀和指派操作符的自由。Swfit提供所有的C支持的按位操作符,下文有具体描述。CSS颜色值#CC6699依据Swift的十六进制表示法被写作0xCC6699。)有符号整型用它们的第一个bit来表示正负。

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部