angular 1.5 组件绑定未从某些事件更新

Question

我有一个 angular 1.5 组件（即 myCarousel：它包装了一个 bootstrap 轮播）触发事件并通过函数绑定公开它。父容器（即 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()[=16] 通知 angular =]

angular 1.5 组件绑定未从某些事件更新

angular 1.5 component binding not updated from certain events

angularjs

angular-components