[英]Passing variables between KnockoutJS and AngularJS
I am using Knockout in my SPA dashboard creation. 我在SPA仪表板创建中使用了淘汰赛。 Its working good.But we need to add more and more complex things in our dashboard, so we planned to develop the remaining part of dashboard in Angular. 它的工作正常。但是我们需要在仪表板中添加越来越多的复杂内容,因此我们计划在Angular中开发仪表板的其余部分。
My question is how can i pass variables from knockout to Angular. 我的问题是如何将变量从敲除传递给Angular。 I tried using set and get methods, but it didn't helped me.. 3.So, i tried like this, i would like to set an attribute value in the ko function when, like this.. 我尝试使用set和get方法,但并没有帮助我。3.因此,我尝试这样,我想像这样在ko函数中设置属性值。
<li id="setMgmtEnv">
<a href='javascript:;' data-bind="click: setMgmtEnv">
<span>Manage Orgs</span>
</a>
</li>
///////in Main JS file
var x = document.getElementById("setMgmtEnv");
x.setAttribute("value", "0");
////// In KO model
self.setMgmtEnv = function(){
x.setAttribute("value", "1");
}
///////// In Angular i am noticing the change variable like this
$scope.$watch(function(load) {
return $scope.toLoad = document.getElementById('setMgmtEnv').value;
}, function(newValue, oldValue) {
console.log("$scope.toLoad2 : " + $scope.toLoad);
if ($scope.toLoad) {
console.log("$scope.toLoad3 : " + $scope.toLoad);
$http({
method : 'GET',
url : url
}).success(function(data) {
console.log(data);
}).error(function(data) {
alert("Failure message: " + JSON.stringify({
data : data
}));
});
}}
Mixing KnockoutJS and AngularJS in one application is a big red flag. 在一个应用程序中混合使用KnockoutJS和AngularJS是一个很大的危险信号。 Be sure you understand what you're doing, or you'll probably be better off rewriting the KO parts in Angular. 确保您了解自己在做什么,否则最好用Angular重写KO部件。
Having said that, I can try to answer the question you're asking, though not in the context of the code snippet you provided (which is very unclear). 话虽如此,我可以尝试回答您要问的问题,尽管不是在您提供的代码段的上下文中(这非常不清楚)。
There are three main ways KO can interact with Angular (which is the direction you seem to be asking about): KO可以与Angular进行交互的三种主要方式(这似乎是您询问的方向):
Option 2 and 3 are a recipe for disaster. 选项2和3是灾难的秘诀。 They can be done, but are that bad I'll leave creating a PoC as an excercise for the reader. 它们可以完成,但是不好的是,我会留下创建PoC作为练习的机会。
That leaves option 1, which in specific cases can actually be useful. 剩下的选项1在特定情况下实际上是有用的。 To do so you need these ingredients: 为此,您需要以下成分:
$scope.$apply
no notify Angular the KO subscription callback has changed the scope. 调用$scope.$apply
否通知Angular KO订阅回调已更改范围。 Here's an exmaple: 这是一个例子:
var ViewModel = function() { this.name = ko.observable(""); }; var vm = new ViewModel(); angular.module("demoApp", []) .controller("myCtrl", ["$scope", function($scope) { $scope.name = vm.name(); vm.name.subscribe(function(newVal) { $scope.$apply(function() { $scope.name = newVal; }); }); }]); ko.applyBindings(vm, document.getElementById("knockoutArea"));
div { margin: 5px; padding: 5px; border: 1px solid #edd; background-color: #fee; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div id="knockoutArea"> <strong>Knockout</strong><br> Type your name: <input data-bind="textInput: name"> </div> <div id="angularArea" ng-app="demoApp" ng-controller="myCtrl"> <strong>Angular</strong><br> We know your name is: <strong>{{ name }}</strong> </div>
As an alternative, given that Angular seems to be your way forward, you may want to invert the dependency. 作为替代方案,鉴于Angular似乎是您的前进之路,您可能需要反转依赖关系。 Give KO a reference to Angular and make that "legacy" part of your code call updates on the Angular scopes. 给KO一个对Angular的引用,并在Angular范围内的代码调用更新中添加“遗留”部分。 This makes your KO code a lot dirtier, but keeps your future codebase cleaner. 这使您的KO代码更加肮脏,但是使您将来的代码库更整洁。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.