как вызвать функцию из литерала шаблона при нажатии ng - PullRequest
Новая
       20

как вызвать функцию из литерала шаблона при нажатии ng

0 голосов
/ 06 сентября 2018

Я вызываю функцию close_popup из литерала шаблона. Я хочу передать идентификатор переменной. Ниже приведен код 

function register_popup(id, name) {

            var htmlelement = `<div class="popup-box chat-popup" id="${id}">
                                    <div class="popup-head background-purple-gradient">
                                        <div class="popup-head-left">${name}-${id}</div>
                                        <div class="popup-head-right">
                                            <span style="cursor:pointer" ng-click="close_popup(${id})">&#10005;</span>
                                        </div>
                                        <div style="clear: both"></div>
                                    </div>
                                    <div class="popup-messages">
                                        <div ng-repeat="message in chatMessages" ng-class="{'message-right': message.align == 'right', 'message-left': message.align == 'left'}">
                                            <div class="message-text">{{message.msg}}</div>
                                                <span class="message-time">{{message.time}}</span>
                                            </div>
                                        </div>
                                        <md-divider></md-divider>
                                        <form ng-submit="sendMsg()" emoji-submit="sendMsg()" emoji-form emoji-message="new_message">
                                            <div class="popup-input-wrapper md-padding" layout="row" layout-align="start center">
                                                <div class="message-form input-wrapper md-padding" layout="row" layout-align="start center">
                                                    <div flex layout="row" layout-align="center center">
                                                        <input style="font-size:15px" type="text" class="input-control" id="popup-message-input" ng-model="new_message.message" placeholder="Type a message..." autofocus flex/>
                                                    </div>
                                                    <md-button id="emojibtn" class="md-icon-button" aria-label="close">
                                                        <md-icon md-svg-src="cloud/client/assets/svg/smile.svg"></md-icon>
                                                    </md-button>
                                                    <md-button class="md-icon-button" id="send-message" aria-label="close">
                                                        <md-icon md-svg-src="cloud/client/assets/svg/send.svg"></md-icon>
                                                    </md-button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>`



            var compiledElement = $compile(htmlelement)(scope);

            var pageElement = angular.element(document.getElementById("chat-room"));
            pageElement.append(compiledElement);

            scope.popUps.push(id);  
            calculate_popups();
        }

Функция вызывается, но идентификатор, который передается в качестве параметра, не определен. Как правильно передать параметр?

1 Ответ

0 голосов
/ 06 сентября 2018

Я думаю, что вы пропускаете кавычки для идентификатора, поскольку он должен быть строковым литералом.

ng-click="close_popup('${id}')"

ОБНОВЛЕНИЕ :

Почему ng-click="close_popup('${id}') работает, но не ng-click="close_popup(${id})"

Это немного сложно объяснить, потому что у нас есть литерал шаблона JavaScript внутри шаблона AngularJS.

Когда вы вызываете register_popup, вы передаете ему идентификатор, который является строковым значением.Его значение (скажем, popupId) будет вставлено в строку шаблона.Таким образом, к тому времени, когда angular получит ваш шаблон, все ${id} будут заменены на popupId.Angular видит: ng-click="close_popup(popupId)".Он будет обрабатывать popupId как переменную, определенную в $scope, и попытаться найти ее (вот почему вы получили неопределенное значение).

То, что вы на самом деле хотели передать Angular, это ng-click="close_popup('popupId')", поэтому вам понадобится дополнительнаяцитаты.

Вы можете сделать console.log(htmlelement), прежде чем скомпилировать его.Это поможет вам понять, какой будет строка после ее оценки.

...