javascript - Creating directive to part of template which is shown after a click -

i've got template 2 kind of article-container: viewer , editor:

<article ng-if="!editor" ng-controller="article">     <div>some content</div> </article>  <article ng-if="editor" ng-controller="article">     <div mysharedscope></div> </article> 

while clicking button user can switch between 2 container:

<button ng-click="editor = !editor" ng-bind="editor ? 'abort' : 'edit'"></button> 

now want create directive on second container. did:

app.directive('mysharedscope', function () {     return {         template: 'new content'     }; }); 

but missing, doesn't work. want use directive dom mainpulation link: function ($scope, element, attrs) { }

two things, first directive mysharedscope transform in it's directive definition camel case

<div mysharedscope></div> 

to dashes so

<div my-shared-scope></div> 

after switch out, you'll need make sure you're translcuding content nested inside of first directive (article), , placing ng-transclude directive inside of template.

see docs on angular website

as basic implementation of this, i've created fiddle 2 of 2 directives appropriately switch when button triggered. content transcluded here, feel free cherry pick need it.

https://jsfiddle.net/wvty8rpc/2/