Function from the template code is not called

Question

In code I have call, for example addComment, why after pasted from HTML do directiv template she didn't work? What should I do.

And second question is what differences is between

modal-window-card card="card"

and

modal-window-card="card"

Because I saw that probably I have only assigned variable card.name and in first example I have whole object but why?

HTML:

 <div modal-window-card card="card"></div>  

Directiv:

App.directive('modalWindowCard', function () {
    return {
        scope: {
            card: "=", 
        },
        template: `
        <div id="{{$parent.$parent.$index}}/{{$parent.$index}}" class="modalDialog">
            <div>
                <a href="#close" title="Close" class="close">X</a>
                <div>
                    <div class="windows-title">
                        <span class="header">{{ card.name }} </span>
                    </div>
                    <div class="window-header">
                        <p class="quiet-header">W liscie {{ item.list }}</p>
                    </div>

                    <div class="windows-description">
                        <span class="loud-header">Dodaj komentarz:</span>
                        <form ng-submit="addComment($parent.$index, $index, commentCard)">
                            <input id="text2" ng-model="commentCard" cols="30" rows="5"> 
                          </form>
                            <button ng-click="addComment($parent.$index, $index, commentCard)" style="margin-top:5px;">Zapisz</button>
                       </div>

                        <div class="window-activity">
                            <span class="loud-header">Aktywnosc</span>
                            <span class="quiet-header" style="float: right; margin-right: 310px;">Pokaz Szczególy</span>
                            <div class="window-comments">
                                <div style="border-bottom: 1px solid #E2E4E6; margin-top: 5px;" ng-repeat="comment in card.comments">
                                    <span class="name-header">{{ comment.author }}</span>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`
   }
})

Answer 1

You should use @ instead of using =

scope: {
        card: "@", 
    }

in div element

<div modal-window-card card="card value is here"></div>

You are calling a directive "modalWindowCard" using modal-window-card and you are passing the attribute named "card" to the directive's isolate scope property.

in this case

<div modal-window-card="card value is here"></div>

Angularjs tries to find a directive but it can't parse this '='. The name 'card' in modal-window-card="card value is here" is NOT an attribute which you can send it to the directive.

I have modified your code please check here