javascript - 未调用模板代码中的函数

Question

在我调用的代码中，例如addComment，为什么从HTML do directiv 模板粘贴后她不起作用？我该怎么办。

第二个问题是两者之间有什么区别

modal-window-card card="card"

和

modal-window-card="card"

因为我发现我可能只分配了变量 card.name 并且在第一个示例中我拥有整个对象，但为什么？

HTML:

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

指令:

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

您应该使用@而不是=

scope: {
        card: "@", 
    }

在 div 元素中

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

您正在使用 modal-window-card 调用指令“modalWindowCard”，并将名为“card”的属性传递给该指令的隔离范围属性。

在这种情况下

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

Angularjs 尝试查找指令，但无法解析此“=”。 modal-window-card="card value is here"中的名称“card”不是您可以将其发送到指令的属性。

我修改了您的代码，请检查here