AngularJS 双向数据绑定不起作用答案

【问题标题】：AngularJS two-way data binding won't workAngularJS 双向数据绑定不起作用
【发布时间】：2016-01-09 00:54:49
【问题描述】：

我已经经历了大约一个月的角度。
我熟悉它的所有核心方面，但我遇到了一个我不明白的问题。
我有 2 个指令 - 一个是父级，另一个是子级。
孩子从父母那里获得 3 个参数 - 其中 2 个通过，但是当我调试并检查第 3 个参数时 - 它是未定义的。

子指令 -

angular.module('management').directive('timeFrame', function() {
return {
    restrict: 'E',
    templateUrl: '/Client/directives/timeFrame/timeFrame.html',
    scope: {
        timeFrame: '=',
        deleteFrameFunction: '&',
        index: '@'
    }

子指令的使用方式如下：

<div class="list-group-item" ng-repeat="timeFrame in ad.timeFrames">
  <time-frame index="{{$index}}" timeFrame="timeFrame" deleteFrameFunction="(function() {doStuff;})"></time-frame>
</div>

所有参数都通过，但timeFrame是未定义的。
我尝试更改将其传递给 {{timeFrame}} 或 :ad.timeFrames[{{$index}}] 的方式以及许多其他失败的方式。

我需要使用双向绑定来传递这个参数，因为这个指令会修改它并且父指令必须知道它。

我没有做任何与以相同方式为我工作的其他指令不同的事情。

任何帮助/解释将不胜感激，
提前致谢。

【问题讨论】：

在你的 html 中，变量 $index 应该是 index (no $)
你试过ad.timeFrames[$index]吗？
顺便说一句，您可以将值向下传递，然后使用$emit 将事件发送给父级，而不是双向绑定吗？在父范围内你可以$on 来监听事件。
@SambhavGore 当前的最佳实践表明，您应该远离在显式绑定就足够的作用域链中发生事件。没有理由在这里介绍额外的事件。如果您正在编写 Angular 1.x 代码并打算在未来转换为 Angular 2.x，则尤其如此。
@DavidL 谢谢，我很想了解更多。因为根据我的理解，在 Angular2 中，不鼓励使用 2 路数据绑定，事件将是通知父母下线所做更改的方式。您可以指向任何链接吗？

标签： angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

您的命名约定不正确。当绑定到指令范围的属性时，同样适用于指令使用的驼峰式连字符命名约定。

time-frame="timeFrame"

但是，由于这会与您的指令名称冲突，您应该使用不同的范围属性名称。

指令：

scope: {
    boundTimeFrame: '=',
    deleteFrameFunction: '&',
    index: '@'
}

模板：

<time-frame index="{{$index}}" bound-time-frame="timeFrame" 
    delete-frame-function="(function() {doStuff;})"></time-frame>

【讨论】：

非常感谢，它成功了。现在感觉有点傻。我想知道 deleteFrameFunction 是如何通过的，即使命名约定也不正确？再次感谢大卫。
@DotnetProg 正确，这也是“不正确”的，但仅从“样式”的角度来看。它“有效”是因为 '&' 允许您调用父函数并通过一个参数，而不是将父级的某些内容绑定到指令的隔离范围。在这种情况下，“父函数”只是您定义的匿名函数，因此不需要引用任何内容。
我能想到的唯一解释是您通过属性引用它，而不是通过范围来绑定值。为了将其绑定到范围，它必须遵循适当的命名约定。
知道了。感谢你的宝贵时间！ :)