Угловое связывание с компонентом 1.5 не обновлено из определенных событий

Question

У меня есть угловой компонент 1.5 (т. Е. MyCarousel: он обертывает карусель начальной загрузки), который запускает событие и предоставляет его с привязкой к функции. Компонент родительского контейнера (то есть myContainer) связывает функцию с этим событием и изменяет некоторое внутреннее состояние при срабатывании. Другой дочерний компонент родительского контейнера привязан к внутреннему состоянию контейнера.

Проблема:

Когда я вызвать событие на myCarousel от события нажатия кнопки, все работает отлично, и я могу видеть, связывание обновляется ребенок-компонента.

Однако, когда я вызываю событие из события карусельного слайда (slide.bs.carousel), привязка не обновляется.

Вот plunker, чтобы продемонстрировать: https://plnkr.co/edit/AHxaX8o0sE94Nfir7DVB

Может кто-нибудь объяснить, почему это происходит и как решить эту проблему?

Некоторые соответствующий код:

mainApp.component("myCarousel", { 
    templateUrl: "myCarousel.html", 
    bindings: { 
    onEventTriggered: "&" 
    }, 
    controllerAs: "vm", 
    controller: function() { 
    let vm = this; 
    vm.$onInit = function() { 
     console.log("init!"); 
     $("#theCarousel").carousel(); 
     $("#theCarousel").on("slide.bs.carousel", (event) => { 
     console.log("sliding " + event.direction); 
     vm.onEventTriggered(); 
     }); 
    }; 
    } 
}); 

mainApp.component("myContainer", { 
    templateUrl: "myContainer.html", 
    controllerAs: "vm", 
    controller: function() { 
    let vm = this; 
    vm.counter = 0; 
    vm.triggerEvent = function() { 
     console.log("event!"); 
     vm.counter++; 

    } 
    } 
}); 

mainApp.component("childComponent", { 
    template: "<div>Event {{vm.attribute}}</div>", 
    controllerAs: "vm", 
    bindings: { 
    attribute: "<" 
    } 
}); 

Answer 1

Один из способов сделать это:

controller: function($scope) { 
    let vm = this; 
    vm.$onInit = function() { 
     console.log("init!"); 
     $("#theCarousel").carousel(); 
     $("#theCarousel").on("slide.bs.carousel", (event) => { 
     vm.onEventTriggered(); 
     console.log("sliding " + event.direction); 
     $scope.$apply(); 
     }); 
    }; 
    } 

использованием $scope.$apply()

обновленный plunkr: https://plnkr.co/edit/8yZOyuQfofdoYz00tFBk?p=preview

Вы должны использовать $scope.$apply(), т.к. $("#theCarousel").on("slide.bs.carousel", ... - код jquery, и вам нужно уведомить об этом с помощью $scope.$apply()