i have set of directives share scope
update:
the code available plunk here http://plnkr.co/edit/jz77bszggrw6n4k718is?p=preview
todo-item:
app.directive("todoitem",function(deletetodo,$log){ var dirdefobj = { restrict:'e', templateurl:'app/templates/todo.html', scope:{ todo:'=value' }, controller:function($scope){}, replace:true }; return dirdefobj; }); template:
<div class="ui card"> <todo-formui ng-show="todo.editmode"></todo-formui> <todo-cardui ng-show="!todo.editmode"></todo-cardui> </div> there 2 directives inherit scope of directive:
todo-cardui
app.directive('todocardui',function(){ var dirdefobj = { restrict:'e', templateurl:'app/templates/display-todo.html', scope:false, replace:true, controller:function($scope) { $scope.clickdone = function clickdone(){ //two tasks (1)toggle done value on todo (2) toggle btntext on todo $scope.todo.done = !$scope.todo.done; $scope.todo.btntext = $scope.todo.done?'reinstate':'done'; }; $scope.remove = function remove() { deletetodo.delete($scope.todo); $scope.$emit('todo:deleted',$scope.todo); }; $scope.edit = function edit(value) { $scope.todo.editmode = true; $scope.savedstate = angular.extend({},$scope.todo); }; } }; return dirdefobj; }); template:
<div> <div class="content"> <i class="right floated blue pencil icon" ng-click="edit()"></i> <header class="ui medium header"> <span ng-class="{'done-todo':todo.done,'normal-todo':!todo.done}">{{todo.task}}</span> </header> <div class="description"> <p>{{todo.description}}</p> </div> </div> <div class="extra content"> <button class="ui small green toggle button floated left" ng-click="clickdone()">{{todo.btntext}}</button> <button class="ui small red button floated left" ng-click="remove()">delete</button> </div> </div> todo-formui:
app.directive("todoformui",function(editservice){ var dirdefobj = { restrict:'e', templateurl:'app/templates/edit-todo.html', scope:false, controller:function($scope){ $scope.display = function display(){ console.log("inside edit preview function"); $scope.editmode = false; }; $scope.save = function(){ editservice.edit($scope.todo); }; $scope.discard = function(){ $scope.todo={ task:'', dscription:'', btntext:'' }; $scope.todo = $scope.savedstate; }; }, replace:true }; return dirdefobj; }); template:
<div ng-class="{description:show_modal,content:!show_modal}"> <i class="right floated blue unhide icon" ng-click="display()"></i> <form class="ui small form"> <div class="field"> <label>task</label> <input type="text" name="task" placeholder="what want do?"ng-model="todo.task"> </div> <div class="field"> <label>description</label> <textarea ng-model="todo.description"></textarea> </div> <div class="two fields"> <button class="ui red button floated right">discard</button> <button class="ui submit green button floated right" ng-click="save()">save</button> </div> </form> when executing code,i found display function in todo-formui not execute,no matter put or tried do.the save function in same scope runs no problems.
in preview function(as mentioned in plunker), have update scope
$scope.todo.editmode = false;
instead of
$scope.editmode = false;
then preview avaliable
hope helps
