angular 1.5組件綁定未從某些事件更新

我有一個角度爲1.5的組件（即myCarousel：它包裝引導程序輪播），它觸發事件並使用函數綁定公開它。父容器（即myContainer）組件將函數綁定到該事件，並在觸發時修改某些內部狀態。父容器的另一個子組件綁定到容器的內部狀態。angular 1.5組件綁定未從某些事件更新

問題：

當我從一個按鈕單擊事件觸發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: "<" 
    } 
});

來源

2016-12-09 Stif

你正在使用jQuery來捕獲事件，而不是使用angularjs – sisyphus

一種方式來做到這一點是：

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()

來源

2016-12-09 10:51:22 gaurav5430

Tnx，它做到了！我使用$ scope。$ apply（fn）重載，因爲它會執行一些額外的錯誤處理。 – Stif

angular 1.5組件綁定未從某些事件更新

回答

相關問題