2

KnockoutJS と JQuery を使用して開発された別の Web アプリに、既に開発された AngualarJS Web アプリを表示する必要があります。純粋なノックアウト JS テンプレート技術を使用して開発された親アプリ。これについて調査したところ、これを達成するための1つのアプローチとしてiFrameが見つかりました（正しいアプローチかどうかはわかりません）。親アプリのテンプレート ファイルとして宣言されている iFrame 内に AngularJs アプリをロードするプロトタイプを作成しました。プロトタイプレベルでは、うまくいきました。しかし、ここでいくつかの問題に直面しています a) すべての親 (KnockoutJS アプリ) のテンプレート ファイルで iFrame を宣言する必要があります。b) iFrame と親 Web ページ/アプリ (両方のアプリが同じドメインにある) の間の通信は、少し複雑で信頼性が低いように見えます。

これを達成するためのより良いアプローチを誰かに提案してもらえますか?

ありがとう、bms

4

1 に答える 1

2

実際、ko は angular でうまくプレイできます。このフィドルでは、angular と ko の両方を同じページに適用し、ko は dom の一部を制御し、angular は別の部分を制御します。彼らはお互いに話すこともできます。

唯一の特別な点は、angular に属する dom ブランチを制御しないように ko に指示するカスタム バインディングです。このアプローチでは、iframe は必要ありません。しかし、おそらく ko テンプレートを変更する必要があります。私は角度についてよく知らないので、角度コードは非常に悪いかもしれません。

html:

<div>
   <div>message for angular:<input type="text" data-bind="value:data"/>
      <button data-bind="click:sendDataToAng">send message to angular</button>
   </div>
   <span data-bind="text:externalMessage"></span>
</div>

<div data-bind="noControl:{}">
<div >
<hr />
<div>--------------Angular section, everything outside horizontal lines is controlled by ko------------</div>
<div ng-app="" >
   <div ng-controller="ngvm.Cntl" id="angularContainer" >
      message for ko: <input type="text" ng-model="data" />      
      <button type='button' ng-click="sendToKO()"> send message to ko </button>
      <div ng-bind="externalMessage"></div>
   </div>
</div>
<hr />    
    </div>
</div>

    someValue: <input data-bind="value:someValue, valueUpdate:'afterkeydown'" />    
<div data-bind="text:someValue">
</div>

js、nowrap -- 頭の中で、Angular が機能するように:

var ngvm = {
    Cntl: function($scope) {
        $scope.data = '';
        $scope.sendToKO = function(){            
            console.log($scope.data);
            kovm.externalMessage("message from angular: " + $scope.data);
        }
        $scope.externalMessage = "no extsdfernal messages";


        $scope.$watch('externalMessage', function(newValue, oldValue) {
            console.log(newValue);
        });        
    }
}

$(function(){
    var KOCtor = function(){
        var self = this;
        self.externalMessage = ko.observable("no external messages");
        self.data = ko.observable();
        self.sendDataToAng = function(){
        var $scope = angular.element($("#angularContainer")[0]).scope();            
            $scope.$apply(function(){                
                $scope.externalMessage = "message from ko: " + self.data();
            });    
            $scope.$digest();
        }


        self.someValue = ko.observable("koko");
    }

    ko.bindingHandlers.noControl = {
       init:function(element, valueAccessor, allBindings, viewModel, bindingContext){         
        return { controlsDescendantBindings: true };              
    },
    update:function(element, valueAccessor, allBindings, viewModel, bindingContext){                               
    }        
    }

   window.kovm = new KOCtor();    
   ko.applyBindings(window.kovm);
})
于 2013-11-05T13:17:15.547 に答える