Angular - Knockout 模型共享

Question

我想将 Angular 模型绑定到一个 Knockout 组件。它正在工作 - 当 Angular 模型更改时，将应用 Knockout 绑定。但问题是相反的——我希望 Angular 模型在 Knockout 组件更改时更新，并且在不接触组件的情况下这样做（它一定不知道 Angular 包装器）。 目标 - 使用 Angular 围绕 KO 组件构建快速原型框架，这些组件也在其他环境中使用。因此，KO 组件可以并且应该共享模型（来自 Angular 包装器）。

编辑： 这是一个jsFiddle 示例来展示我想要实现的目标。 这是一种简化，因为在现实世界中，KO 组件将使用内部虚拟机，这将很难被观看。但即使在这里我也不明白为什么 $watch 不起作用。

var sharedData = {
    personName: "alex",
    personAge: "32"
};


function WrapperCtrl($scope){
    $.each(sharedData, function(key, value) {
        sharedData[key] = (typeof value !== "function") ? ko.observable(value) : value;
    });

    $scope.wrapData = sharedData;

    ko.applyBindings(sharedData, document.getElementById("ko_1"));  
    ko.applyBindings(sharedData, document.getElementById("ko_2"));  

    $scope.$watch(
        function () {
            return sharedData.personName();
        }, 
        function(newValue, oldValue) {
            console.log("change");
        }
    );

    $scope.doSomething = function(){
        console.log("before angular function: ", $scope.wrapData.personName(),    $scope.wrapData.personAge())
        sharedData.personName('Bob').personAge(41);
         console.log("after angular function: ", $scope.wrapData.personName(), $scope.wrapData.personAge())
    };
}


function doSomething() {

    console.log("before knockout function", sharedData.personName(), sharedData.personAge())
    sharedData.personName('Mary').personAge(25);
    console.log("after knockout function", sharedData.personName(), sharedData.personAge())
}

Answer 1

如果不允许您直接将 Angular 绑定插入到您的组件中，那么您将无法启动您的摘要循环，因此 Angular 将不知道您的数据源已更新。解决此问题的一种方法是定期调用 $apply，这将使用任何外部更改更新您的模型，如下所示：

    setInterval($scope.$apply, 500);

http://jsfiddle.net/HmcnB/11/