feat(playground): add example for injecting same type of local direct…

…ives with separate accessors
ngParty · Mar 2, 2016 · 01a91d7 · 01a91d7
1 parent f39bbc4
commit 01a91d7
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/playground/app/app.ts b/playground/app/app.ts
@@ -14,6 +14,7 @@ import { TodoStore } from './stores/todoStore.service';
 import { ElementReadyDirective } from './directives/element-ready.directive';
 import { MyValidatorDirective } from './directives/my-validator.directive';
 import { MyFooDirective } from './directives/my-foo.directive';
+import { MyFormBridgeDirective } from './directives/my-form-bridge.directive';
 
 export const AppModule = angular.module( 'app', [TabsModule] )
 
@@ -25,5 +26,6 @@ export const AppModule = angular.module( 'app', [TabsModule] )
   .directive( ...provide( ElementReadyDirective ) )
   .directive( ...provide( MyValidatorDirective ) )
   .directive( ...provide( MyFooDirective ) )
+  .directive( ...provide( MyFormBridgeDirective ) )
 
   ;
diff --git a/playground/app/components/todo-app.html b/playground/app/components/todo-app.html
@@ -25,7 +25,8 @@ <h3>Todo List remaining: {{ $ctrl.todos | remainingTodos }}</h3>
 
 <button
   class="mdl-button mdl-js-button mdl-button--accent"
-  ng-click="$ctrl.showQueryExample=!$ctrl.showQueryExample">{{ $ctrl.showQueryExample ? 'hide' : 'show'}} <code>@Query</code> decorators example
+  ng-click="$ctrl.showQueryExample=!$ctrl.showQueryExample">
+  {{ $ctrl.showQueryExample ? 'hide' : 'show'}} <code>@Query</code> decorators example
 </button>
 <div ng-if="$ctrl.showQueryExample">
   <h3>check your console logs mate!</h3>
@@ -41,7 +42,8 @@ <h3>check your console logs mate!</h3>
 
 <button
   class="mdl-button mdl-js-button mdl-button--accent"
-  ng-click="$ctrl.showDirectiveDiExample=!$ctrl.showDirectiveDiExample">{{ $ctrl.showDirectiveDiExample ? 'hide' : 'show'}} <code>@Inject</code> directive
+  ng-click="$ctrl.showDirectiveDiExample=!$ctrl.showDirectiveDiExample">
+  {{ $ctrl.showDirectiveDiExample ? 'hide' : 'show'}} <code>@Inject</code> directive
 </button>
 <div ng-if="$ctrl.showDirectiveDiExample">
 
@@ -54,3 +56,22 @@ <h3>check your console logs mate!</h3>
   </form>
 
 </div>
+
+<button
+  class="mdl-button mdl-js-button mdl-button--accent"
+  ng-click="$ctrl.showSameLocalDiExample=!$ctrl.showSameLocalDiExample">
+  {{ $ctrl.showSameLocalDiExample ? 'hide' : 'show'}} <code>multi equal @Inject</code> directive
+</button>
+<div ng-if="$ctrl.showSameLocalDiExample">
+
+  <form name="diParentForm">
+    Inside ParentForm
+    <div ng-form="diChildForm" my-form-bridge>
+      Inside childForm
+    </div>
+
+    <button>submit or so</button>
+
+  </form>
+
+</div>
diff --git a/playground/app/directives/my-form-bridge.directive.ts b/playground/app/directives/my-form-bridge.directive.ts
@@ -0,0 +1,14 @@
+import { Directive, Inject, Self, SkipSelf } from 'ng-metadata/core';
+
+@Directive( { selector: '[my-form-bridge]' } )
+export class MyFormBridgeDirective {
+  constructor(
+    @Inject( 'form' ) @Self() private form: ng.IFormController,
+    @Inject( 'form' ) @SkipSelf() private parentForm: ng.IFormController
+  ) {}
+
+  ngOnInit(){
+    console.log( this );
+  }
+
+}