Angularjs 角度1.5组件绑定未根据某些事件更新

我有一个angular 1.5组件（即myCarousel：它包装了一个引导旋转木马），它触发一个事件并用函数绑定将其公开。 父容器（即myContainer）组件将函数绑定到该事件，并在触发时修改某些内部状态。 父容器的另一个子组件绑定到容器的内部状态

问题是：

当我从一个按钮点击事件触发myCarousel上的事件时，一切正常，我可以看到子组件的绑定正在更新

但是，当我从旋转木马幻灯片事件（slide.bs.carousel）触发事件时，绑定不会得到更新

下面是一个plunker演示：

有人能解释为什么会发生这种情况以及如何解决这个问题吗

一些相关代码：

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: "<"
  }
});

mainApp.component（“myCarousel”{
templateUrl:“myCarousel.html”，
绑定：{
onEventTriggered:“&”
},
controllerAs:“虚拟机”，
控制器：函数（）{
让vm=这个；
vm.$onInit=函数（）{
log（“init！”）；
$（“#theCarousel”）.carousel（）；
$（“#theCarousel”）。在（“slide.bs.carousel”，（event）=>{
控制台日志（“滑动”+事件方向）；
vm.onEventTriggered（）；
});
};
}
});
mainApp.component（“myContainer”{
templateUrl:“myContainer.html”，
controllerAs:“虚拟机”，
控制器：函数（）{
让vm=这个；
vm.counter=0；
vm.triggerEvent=函数（）{
console.log（“事件！”）；
vm.counter++；
}
}
});
mainApp.component（“childComponent”{
模板：“事件{{vm.attribute}}”，
controllerAs:“虚拟机”，
绑定：{
属性：“执行此操作的一种方法是：

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（）

更新的PRUNKR：

您需要使用
$scope.$apply（）
，因为
$（“#theCarousel”）。在（“slide.bs.carousel”上，…
是jquery代码，您需要使用
$scope.$apply（）
来通知angular，您正在使用jquery捕获事件，而不是angularjsTnx！我使用了$scope.$apply（fn）重载，因为它会进行一些额外的错误处理。