OLD | NEW |
1 part of angular.directive; | 1 part of angular.directive; |
2 | 2 |
3 /** | 3 /** |
4 * Fetches, compiles and includes an external Angular template/HTML. | 4 * Fetches, compiles and includes an external Angular template/HTML. |
5 * | 5 * |
6 * A new child [Scope] is created for the included DOM subtree. | 6 * A new child [Scope] is created for the included DOM subtree. |
7 * | 7 * |
8 * [NgIncludeDirective] provides only one small part of the power of | 8 * [NgInclude] provides only one small part of the power of |
9 * [NgComponent]. Consider using directives and components instead as they | 9 * [Component]. Consider using directives and components instead as they |
10 * provide this feature as well as much more. | 10 * provide this feature as well as much more. |
11 * | 11 * |
12 * Note: The browser's Same Origin Policy (<http://v.gd/5LE5CA>) and | 12 * Note: The browser's Same Origin Policy (<http://v.gd/5LE5CA>) and |
13 * Cross-Origin Resource Sharing (CORS) policy (<http://v.gd/nXoY8y>) restrict | 13 * Cross-Origin Resource Sharing (CORS) policy (<http://v.gd/nXoY8y>) restrict |
14 * whether the template is successfully loaded. For example, | 14 * whether the template is successfully loaded. For example, |
15 * [NgIncludeDirective] won't work for cross-domain requests on all browsers and | 15 * [NgInclude] won't work for cross-domain requests on all browsers and |
16 * for `file://` access on some browsers. | 16 * for `file://` access on some browsers. |
17 */ | 17 */ |
18 @NgDirective( | 18 @Decorator( |
19 selector: '[ng-include]', | 19 selector: '[ng-include]', |
20 map: const {'ng-include': '@url'}) | 20 map: const {'ng-include': '@url'}) |
21 class NgIncludeDirective { | 21 class NgInclude { |
22 | 22 |
23 final dom.Element element; | 23 final dom.Element element; |
24 final Scope scope; | 24 final Scope scope; |
25 final BlockCache blockCache; | 25 final ViewCache viewCache; |
26 final Injector injector; | 26 final Injector injector; |
27 final DirectiveMap directives; | 27 final DirectiveMap directives; |
28 | 28 |
29 Block _previousBlock; | 29 View _view; |
30 Scope _previousScope; | 30 Scope _scope; |
31 | 31 |
32 NgIncludeDirective(this.element, this.scope, this.blockCache, this.injector, t
his.directives); | 32 NgInclude(this.element, this.scope, this.viewCache, this.injector, this.direct
ives); |
33 | 33 |
34 _cleanUp() { | 34 _cleanUp() { |
35 if (_previousBlock == null) return; | 35 if (_view == null) return; |
36 | 36 |
37 _previousBlock.remove(); | 37 _view.nodes.forEach((node) => node.remove); |
38 _previousScope.destroy(); | 38 _scope.destroy(); |
39 element.innerHtml = ''; | 39 element.innerHtml = ''; |
40 | 40 |
41 _previousBlock = null; | 41 _view = null; |
42 _previousScope = null; | 42 _scope = null; |
43 } | 43 } |
44 | 44 |
45 _updateContent(createBlock) { | 45 _updateContent(createView) { |
46 // create a new scope | 46 // create a new scope |
47 _previousScope = scope.createChild(new PrototypeMap(scope.context)); | 47 _scope = scope.createChild(new PrototypeMap(scope.context)); |
48 _previousBlock = createBlock(injector.createChild([new Module() | 48 _view = createView(injector.createChild([new Module() |
49 ..value(Scope, _previousScope)])); | 49 ..value(Scope, _scope)])); |
50 | 50 |
51 _previousBlock.elements.forEach((elm) => element.append(elm)); | 51 _view.nodes.forEach((node) => element.append(node)); |
52 } | 52 } |
53 | 53 |
54 | 54 |
55 set url(value) { | 55 set url(value) { |
56 _cleanUp(); | 56 _cleanUp(); |
57 if (value != null && value != '') { | 57 if (value != null && value != '') { |
58 blockCache.fromUrl(value, directives).then(_updateContent); | 58 viewCache.fromUrl(value, directives).then(_updateContent); |
59 } | 59 } |
60 } | 60 } |
61 } | 61 } |
OLD | NEW |