在 KnockoutJS 应用程序中将 AngularJS 应用程序作为 iFrame 加载

Loading AngularJS app within KnockoutJS app as iFrame

本文关键字：应用程序 iFrame 加载 KnockoutJS AngularJS      更新时间：2023-09-26

我需要将已经开发的AngualarJS网络应用程序显示到另一个使用KnockoutJS和JQuery开发的Web应用程序中。使用纯KNOCKOUTJS模板技术开发的父应用程序。我对此进行了一些调查，发现iFrame是实现这一目标的一种方法（不知道它是否正确）。我做了一个原型，我在iFrame中加载了AngularJs应用程序，该应用程序被声明为父应用程序的模板文件。在原型级别，它工作正常。但是，我在这里面临一些问题a） 我必须在所有父（KnockoutJS应用程序）模板文件中声明iFrame。b） iFrame 和父网页/应用程序（两个应用程序将位于同一域中）之间的通信看起来有点复杂且不可靠。

谁能建议我一些更好的方法来实现这一目标？

谢谢生物制品管理系统

实际上，ko可以很好地玩棱角。在这个小提琴中，我们将角度和 ko 应用于同一页面，ko 控制 dom 的一部分，而角度控制另一部分。他们也可以互相交谈。

唯一特别的是自定义绑定，它告诉 ko 不要控制属于 angular 的 dom 分支。使用这种方法，您不需要 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 -- 在 head， for angular to work：

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);
})
相关文章：