AngularJS двусторонняя привязка данных не будет работать

Question

Я уже несколько месяцев испытываю углы.
Я знаком со всеми основными аспектами этого, но я столкнулся с проблемой, которую я не понимаю.
У меня есть 2 директивы - один из них - родительский, а другой - ребенок.
Ребенок получает 3 параметра от родителя - 2 из них проходят, но когда я отлаживаю и проверяю третий, он не определен.

Директива по уходу за детьми -

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}}] и многие другие способы, которые не удались.

Мне нужно передать этот параметр, используя двустороннюю привязку, потому что эта директива изменит его, и родительская директива должна знать об этом.

Я не делал ничего другого, кроме других директив, которые работали для меня одинаково.

Любая помощь/объяснения будут оценены,
Заранее спасибо.

Answer 1

Ваше соглашение об именах неверно. При привязке к свойствам с областью действия в соответствии с директивами применяется тот же самый принцип использования camelCase для дефиса, который используется для директив.

time-frame="timeFrame" 

Однако, поскольку это будет конфликтовать с вашим именем директивы, вы должны использовать другое имя свойства scope.

директива:

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

шаблона:

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