2

我想将 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())
}
4

1 回答 1

0

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

    setInterval($scope.$apply, 500);

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

于 2013-10-15T14:56:54.833 回答