$ watch не срабатывает в директиве

Question

У меня есть директива:

function templateFn() {
        return '<div class="card-wrapper">'
            + '<div class="cards-carousel">'
            + '<div class="cards-carousel-inner">'
            + '<div ng-repeat="item in cards">'
            + '<div class="item" ng-class="{\'active\': $index == $parent.ngModel.id, \'next\' : $index == $parent.ngModel.id + 1, \'prev\' : $index == $parent.ngModel.id - 1}">'
            + '<label><input id="{{item.eid}}" type="radio" ng-value="item" ng-model="$parent.ngModel">'
            + '<img alt="{{item.id}}" ng-src="{{item.url}}" /></label>'
            + '</div>'
            + '</div>'
            + '</div>'
            + '</div>'
            + '</div>';
    }

    function linkFn(scope, element, attrs) {
        scope.cards = JSON.parse(attrs.cards);
        scope.$watchCollection('cards', function(newValue, oldValue) {
            if (newValue !== oldValue) {
                scope.cards = newValue;
            }
        }, true);
    }

    return {
        restrict: 'E',
        required: ['ngModel'],
        scope: {
            ngModel: '='
        },
        link: linkFn,
        replace: 'true',
        template: templateFn
    };

и в контроллере я делаю запрос на отдых, чтобы взять необходимые карты.Карты выдвигаются так: ctrl.cardList.push(card)

Это мое мнение:

<ab-card-carousel cards="{{ctrl.cardList}}"
                  ng-model="ctrl.debitCardItem">
</ab-card-carousel>

, и в представлении, когда я console.log ({{ctrl.cardList}}), оно хорошои, как мне нужно, но изменения не сделаны в области видимости. $ watch function.Кто-нибудь может мне помочь?

Answer 1

Удалить интерполяцию из атрибута:

<ab-card-carousel ̶c̶a̶r̶d̶s̶=̶"̶{̶{̶c̶t̶r̶l̶.̶c̶a̶r̶d̶L̶i̶s̶t̶}̶}̶"̶ 
                  cards="ctrl.cardList"
                  ng-model="ctrl.debitCardItem">
</ab-card-carousel>

Добавить одностороннюю привязку:

    scope: {
        ngModel: '=',
        cards: "<",
    },

Изменить linkFn на:

function linkFn(scope, element, attrs) {
    ̶s̶c̶o̶p̶e̶.̶c̶a̶r̶d̶s̶ ̶=̶ ̶J̶S̶O̶N̶.̶p̶a̶r̶s̶e̶(̶a̶t̶t̶r̶s̶.̶c̶a̶r̶d̶s̶)̶;̶
    scope.$watchCollection('cards', function(newValue, oldValue) {
        if (newValue !== oldValue) {
            scope.cards = newValue;
        }
    }, true);
}