Javascript 将AngularJS应用程序作为iFrame加载到KnockoutJS应用程序中
我需要将一个已经开发的AngualarJS web应用程序展示到另一个使用KnockoutJS和JQuery开发的web应用程序中。使用纯knockoutJS模板技术开发的父应用程序。我对此做了一些调查,发现iFrame是实现这一点的一种方法(不知道这是否是正确的方法)。我做了一个原型,在iFrame中加载了AngularJs应用程序,它被声明为父应用程序的模板文件。 在proptotype级别,它运行良好。但是,我在这里面临一些问题 a) 我必须在所有父级(KnockoutJS应用程序)模板文件中声明iFrame。 b) iFrame和父网页/应用程序(两个应用程序将位于同一个域)之间的通信看起来有点复杂和不可靠 谁能给我一些更好的方法来实现这一点 谢谢,Javascript 将AngularJS应用程序作为iFrame加载到KnockoutJS应用程序中,javascript,jquery,angularjs,iframe,knockout.js,Javascript,Jquery,Angularjs,Iframe,Knockout.js,我需要将一个已经开发的AngualarJS web应用程序展示到另一个使用KnockoutJS和JQuery开发的web应用程序中。使用纯knockoutJS模板技术开发的父应用程序。我对此做了一些调查,发现iFrame是实现这一点的一种方法(不知道这是否是正确的方法)。我做了一个原型,在iFrame中加载了AngularJs应用程序,它被声明为父应用程序的模板文件。 在proptotype级别,它运行良好。但是,我在这里面临一些问题 a) 我必须在所有父级(KnockoutJS应用程序)模板文
bms事实上,柯可以很好地与安格尔搭档。在这里,我们将angular和ko应用于同一个页面,ko控制dom的一部分,angular控制另一部分。他们也可以互相交谈 唯一特别的是一个定制绑定,它告诉ko不要控制属于angular的dom分支。使用这种方法,您不需要iframe。 但可能您仍然需要更改ko模板。我对angular不太了解,所以angular代码可能很糟糕 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>
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);
})