ANGULARJS DIRECTIVE FOR SHOWING CONTENT IN A NEW WINDOW
来源:互联网 发布:淘宝客服是不是店主 编辑:程序博客网 时间:2024/05/01 04:23
http://blog-softnauts2.rhcloud.com/2014/03/18/building-angular-directive-that-shows-content-in-new-window/
To make our life easier, we decided to write the directive for displaying its content in a new window.
We want to preserve bidirectional data binding between parent and child windows.
Also, after removing the directive from the parent window DOM - the child window should disappear.
THE GOAL
You may see exactly what we want on jsFiddle (remember to allow it to open popups).
Sample code :
<new-window> {{code}} <input ng-model="code" /></new-window><div> {{code}} <input ng-model="code"/></div>
This code should open a new window with input and text, in a parent window should also be visible input and text, changing input value in any window should be propagated over application.
Another example:
<input ng-model="newItem" /><button ng-click="items.push(newItem);">push!</button><button ng-click="items = [];">clear</button> <div ng-repeat="code in items"> {{code}}</div><new-window ng-repeat="code in items"> {{code}} <input ng-model="code" /></new-window>
We should see the parent window input, and we should be able to add input's content to an array by clicking "push" button. We also should see the button for cleaning an array, and finally all the elements of an array... After cleaning the array all children windows should disappear, and after adding a new element to the array, another window should appear.
With windows displayed as a result of displaying items from the array, bidirectional data binding is not preserved - do you know why? :)
READY DIRECTIVE CODE
Let's see how the final directive looks like, then we'll discuss each part.
app.directive('newWindow', ['$window', '$compile', function($window, $compile) { return { restrict: 'EA', link: function($scope, $element, attr) { $element.on('$destroy', function() { $scope.window.close(); }); }, controller: function($scope, $element) { $scope.window = $window.open('', '_blank'); angular .element($scope.window.document.body) .append($compile($element.contents())($scope)); } } }]);
OPENING WINDOWS AND BINDING DATA
controller: function($scope, $element) { $scope.window = $window.open('', '_blank'); angular .element($scope.window.document.body) .append($compile($element.contents())($scope));}
Open a new window, saving its handle in our local scope - will be essential if later we would like to close the window. The most interesting in this part is the append method parameter , which fill the newly opened window with its content. We use here the service $compile , which does not work as described in the documentation... This call should return a string with the template compiled in our scope, but it rather returns a reference to the DOM object, which will later be compiled... For our needs, it's even better - angular preserves data binding, and we display the object in a new window.
CLOSE THE WINDOW
link: function($scope, $element, attr) { $element.on('$destroy', function() { $scope.window.close(); });}
If our directive is removed from the DOM tree, for example, by deleting the item from the table ng-repeat iterates, the window should disappear. Window closing code should exists in handler of $destroy event, which is emitted by the angular before the destruction of the directive. In such situation we simply close the window whose handle we saved in the local scope.
STYLING
new-window { display: none; }
We want to display the directive in a new window, while it should stay invisible in parent window.
WHAT DO WE GAIN
New window does not need to know anything about JavaScript , or about Angular , because the whole logic remains in the parent window. We don't need to think about it, and the only thing we need to do is to build content of new window.
WHAT DO WE LOSE
It's harder to prepare code for new window, as it's not enough to simply write it somewhere and click "refresh" in the browser. Debugging may also not be as easy as it was in a single-window app.
- ANGULARJS DIRECTIVE FOR SHOWING CONTENT IN A NEW WINDOW
- ANGULARJS DIRECTIVE FOR SHOWING CONTENT IN A NEW WINDOW
- Showing a Spring transaction in log4j
- Example: Showing a Message in JavaMail
- A file provided for interest-showing Friends
- Force a CREF Open in a New Window
- AngularJS Directive For Mouse Wheel Scroll Event
- angularjs install for window
- Creating a Security Descriptor for a New Object in C++
- AngularJS--directive
- angularjs directive
- AngularJS: directive
- Dynamics AX 2012 for Retail: Items not showing in POS
- CREATING A NEW CONTENT PROVIDER
- Showing progress bar in a status bar pane
- SHOWING RELATED ENTITIES ON A FORM IN CRM 2011
- Showing progress bar in a status bar pane
- A new agent management approach for Quantum in OpenStack Grizzly
- 蓝桥杯基础练习:十进制转十六进制
- Error:Could not install Gradle distribution from 'https://services.gradle.org/distributions/gradle-2
- ajax请求,和普通的http url请求,有什么不一样?
- Android Studio 调试技巧
- mybatis——example文件形式——多表联查
- ANGULARJS DIRECTIVE FOR SHOWING CONTENT IN A NEW WINDOW
- 自学SpringBoot之Spring插件拦路虎
- mysql中varchar(10)中定义的长度到底是字符长度还是字节长度
- Java--局部内部类在访问他所在方法中的局部变量必须用final修饰
- Superset安装部署
- Android AIDL
- 判断为空的几种方式
- 一个艰难的过程:在Mac上安装python-opencv
- java常见排序算法