Method display on the scope is not executed

Question

I have a set of directives that share a scope

Update:

The code is available as a 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 are two directives that inherit the scope of this 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 the done value on the todo (2) toggle the btnText on the 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 the edit to 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 do you want to 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 the code,I found that the display function in todo-formui would not execute,no matter where I put it or what I tried to do.The save function in the same scope runs with no problems.

Can you please try to reproduce this using something like [jsFiddle](http://jsfiddle.net), [Plunkr](http://plnkr.co), [jsBin](http://jsbin.com), [CodePen](http://codepen.io) or the inbuilt snippet support on StackOverflow? — GregL, Apr 27 '15 at 23:32
You are aware that by declaring `scope: false` you are inheriting the same scope in your directive, thus extending it with new functions such as `display` etc. I don't think that is what you want to do. — floribon, Apr 27 '15 at 23:58
@floribon I would like to use the two directives here https://github.com/vamsiampolu/angular-jspm-todo/blob/todo-state-transistion/app/templates/create-todo.html and I also want to have an animating transistion between them in the code in the question,can it be done using isolate scopes only... — vamsiampolu, Apr 28 '15 at 01:35
@GregL I have updated the question with a plunker (near the top of the description) http://plnkr.co/edit/JZ77bsZgGrw6N4K718Is?p=preview — vamsiampolu, Apr 28 '15 at 06:32

score 1 · Answer 1 · answered Apr 28 '15 at 14:42

1

It's because the icon is under another html element and the click event isn't triggered. Add a clear after the "preview" icon (which is floated) to push the form where it should be. Use some DOM inspector and you will soon realize the problem.

answered Apr 28 '15 at 14:42

Adrian Neatu

1,989
2
19
34

I have tried setting the setting the z-index value so that the icon appears on top,it does not seem to have any effect on ordering. The updated plunk is here http://plnkr.co/edit/JZ77bsZgGrw6N4K718Is?p=preview – vamsiampolu Apr 29 '15 at 02:30
Have you ever considered to use a simple onclick event with an alert() inside? And see if that triggers? – Adrian Neatu Apr 29 '15 at 06:55

score 1 · Accepted Answer · answered Apr 29 '15 at 13:22

1

In your preview function(as mentioned in plunker), you have to update the scope as

$scope.todo.editMode = false;

instead of

$scope.editMode = false;

then the preview will be avaliable

Hope this helps

answered Apr 29 '15 at 13:22

Alhuck

1,029
8
11

Method display on the scope is not executed

Update:

todo-item:

todo-cardui

todo-formui:

2 Answers2