Question

我有一个角度1.5的组件（即myCarousel：它包裹一个引导程序轮播），它触发一个事件并用函数绑定公开它。父容器（即myContainer）组件将函数绑定到该事件，并在触发时修改某些内部状态。父容器的另一个子组件绑定到容器的内部状态。

问题：

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

但是，当我从轮播幻灯片事件（slide.bs.carousel）触发事件时，绑定不会更新。

以下是一个要说明的傻瓜： 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()

通知有关它的角度

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

1 个答案: