AngularJS双向数据绑定不起作用

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

儿童指令 -AngularJS双向数据绑定不起作用

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}}或ad.timeFrames[{{$index}}]以及许多其他失败方式。

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

我没有做过与其他指令相同的其他指令。

任何帮助/解释将不胜感激，
在此先感谢。

来源

2016-01-09 DotnetProg

在HTML中，变量$指数应指数（没有$） – Austio

您是否尝试过'ad.timeFrames [$指数]'？ –

顺便说一句，而不是双向绑定，你可以只传递值，然后使用'$ emit'发送一个事件给父？在父母范围内，您可以通过'$ on'来收听活动。 –

您的命名约定不正确。绑定到指令作用域属性时，适用于用于指令的连字符命名约定的camelCase。

time-frame="timeFrame"

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

指令：

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

模板：

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

来源

2016-01-09 01:11:52

非常感谢，它工作。现在感觉有点傻。我想知道deleteFrameFunction是如何通过的，即使命名约定对它也不正确？再次感谢大卫。 – DotnetProg

@DotnetProg正确，那也将是“不正确的”，但也只是从“样式”的角度来看。它“工作”，因为'＆'允许您调用父函数并传递参数，而不是将父项的内容绑定到指令的隔离范围。在这种情况下，“父功能”就是您定义的匿名功能，因此无需提及任何内容。 –

我能想到的唯一解释是你通过属性引用它，而不是通过将范围限定在范围内。为了将其绑定到范围，它必须遵循适当的命名约定。 –

AngularJS双向数据绑定不起作用

回答

相关问题