AngularJS：打开新窗口并维护双向数据绑定 [英] AngularJS: open new window and maintain two-way data binding

问题描述

我正在打开一个新的浏览器窗口，里面有角度 $ scope 数据：

I'm looking to open a new browser window with angular $scope data inside:

<div ng-app="test" ng-controller="testController">
<input type="text" ng-model="var" />
    <button ng-click="openWindow()">push!</button>
</div>

var test = angular.module('test', []);

test.controller('testController', ['$compile', '$scope','$window', function($compile, $scope, $window) {
    $scope.var = 'hello'
    $scope.openWindow = function() {
        $scope.window = $window.open('', '_blank', 'width=500,height=400');
        angular.element($scope.window.document.body).append($compile($scope.var)($scope));
    };
}]);

JSFIDDLE

以上内容不会返回窗口中的任何数据。它作为一个指令，如在这里。

The above doesn't return any data in the window. It works as a directive like in here.

如果我追加（'hello world'）它有效。有人可以告诉我如何在不使用指令的情况下正确绑定数据，如果可能的话吗？

If I append('hello world') it works. Can someone show me how to bind the data correctly without the use of a directive, if that's even possible?

推荐答案

你可以将附加到带有绑定的body编译元素，类似于

You can append to body compiled element with binding, something like

$compile('<div>{{var}}</div>')($scope)

或者你可以添加html到body本身并编译它

or you can add html to body itself and compile it

$compile(angular.element($scope.window.document.body).html('{{var}}'))($scope);

示例JSFiddle

这篇关于AngularJS：打开新窗口并维护双向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！