我从模板文字调用函数close_popup。我想传递一个变量id。下面是代码
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})">✕</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();
}
函数被调用但是作为参数传递的id是未定义的。如何正确传递参数?
我认为你缺少id的引号,因为它应该是一个字符串文字。
ng-click="close_popup('${id}')"
更新:
怎么来
ng-click="close_popup('${id}')
工作,但不是ng-click="close_popup(${id})"
这有点难以解释,因为我们在AngularJS模板中有JavaScript的模板文字。
当你调用register_popup
时,你将传递一个id为字符串值的id。它的值(比如popupId
)将被注入到模板字符串中。因此,当角度获取模板时,所有${id}
将被popupId
取代。 Angular看到的是:ng-click="close_popup(popupId)"
。它会将popupId
视为在$scope
上定义的变量,并尝试查找它(这就是为什么你没有定义)。
你真正想传递给Angular的是ng-click="close_popup('popupId')"
,因此你需要额外的报价。
你可以在编译之前做一个console.log(htmlelement)
be。这将有助于您了解字符串在评估后变为什么。