2

Angular モデルを Knockout コンポーネントにバインドしたいと考えています。機能しています - Angular モデルが変更されると、Knockout バインディングが適用されます。しかし、問題は逆方向にあります。Knockout コンポーネントが変更されたときに Angular モデルを更新し、コンポーネントに触れずに更新する必要があります (Angular ラッパーについて認識してはなりません)。ターゲット - Angular を使用して、他の環境でも使用されている KO コンポーネントの周りにラピッド プロトタイピング フレームワークを構築します。KO コンポーネントはモデル (Angular ラッパーに由来する) を共有できますし、共有する必要があるため、この質問です。

編集:これは、私が達成しようとしていることを示すjsFiddleの例です。実際の KO コンポーネントは $watch が難しい内部 VM を使用するため、単純化されています。しかし、ここでも $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 はデータ ソースが更新されたことを認識できません。これに取り組む 1 つの方法は、定期的に $apply を呼び出すことです。これにより、次のように外部の変更でモデルが更新されます。

    setInterval($scope.$apply, 500);

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

于 2013-10-15T14:56:54.833 に答える