我在我的一个项目中使用 Angular.js，我想将它与 Polymer 结合使用。我在 Angular.js 控制器和 Polymer 自定义元素之间的通信方面遇到了一些问题。
我的问题是什么...
例如，我有一个 AuthService、一个 AuthController，它使用 AuthService 向后端发送请求（带有 Express 的 Node.js）和一个简单的登录表单，如下所示：
<form role="form" ng-submit="login()">
<div>
<label for="usernameInput">Username: </label>
<input type="text" name="usernameInput" id="usernameInput" placeholder="Username" ng-model="usernameInput" required>
</div>
<div>
<label for="passwordInput">Password: </label>
<input type="password" name="passwordInput" id="passwordInput" placeholder="Password" ng-model="passwordInput" required>
</div>
<div>
<label for="rememberMeInput">Remember me: </label>
<input type="checkbox" name="rememberMeInput" id="rememberMeInput" ng-model="rememberMeInput">
</div>
<input type="submit" name="loginSubmit" value="Log in">
</form>
Everiting 在这种格式下工作正常，但我想将表单移动到 Polymer 自定义元素中，如下所示：
<polymer-element name="cg-login-form">
<template>
<div layout vertical>
<div class="error hidden">{{ error }}</div>
<form role="form" layout vertical center>
<div>
<paper-input type="text" floatinglabel label="Username" value="{{ inputData.username }}"></paper-input>
</div>
<div>
<paper-input type="password" floatinglabel label="Password" value="{{ inputData.password }}"></paper-input>
</div>
<div layout horizontal center>
<paper-checkbox role="checkbox" checked="{{ inputData.rememberBe }}"></paper-checkbox>
<div>Remember me</div>
</div>
<paper-button label="Log in" raisedbutton role="button" on-click="??????"></paper-button>
</form>
</div>
</template>
<script>
Polymer('cg-login-form', {
inputData: {
username: undefined,
password: undefined,
rememberMe: false
}
});
</script>
</polymer-element>
我的问题是：如何在表单提交时调用 AuthController 的登录方法，并且我希望 Polymer 元素保持 Angular.js 独立。
我正在考虑使用输入数据触发登录事件并在 AuthController 中侦听此事件。然后登录事件处理程序可以调用AuthContoller的登录方法，但是我无法通过事件获取发送的数据。
这就是我在以下内部触发事件的方式：
<paper-button label="Log in" raisedbutton role="button" on-click="{{ login }}"></paper-button>
Polymer('cg-login-form', {
inputData: {...},
login: function() {
this.fire('login', { loginData: this.inputData });
}
});
这就是我在 AuthController 中监听登录事件的方式：
// In this way the detail and the data properties of the event object are undefined
angular.element("#loginForm").on('login', function(event) {
console.log(event.detail);
console.log(event.data);
});
// In this way the detail and the data properties of the event object are undefined
$('#loginForm').on('login', function(event) {
console.log(event.detail);
console.log(event.data);
});
// In this way the detail property of the event object is set with the sent data
document.getElementById('loginForm').addEventListener('login', function(event) {
console.log(event.detail);
console.log(event.data);
});
// In this way the detail property of the event object is set with the sent data
document.querySelector('#loginForm').addEventListener('login', function(event) {
console.log(event.detail);
console.log(event.data);
});
为什么 document.getElementById('loginForm').addEventListener() 和 document.querySelector('#loginForm').addEventListener() 有效而其他两种方式无效？如何使用 jQuery 或 jqLite 获取发送的数据？我更喜欢使用它们而不是使用 html 方法。
如果你能告诉我一种更好的方式来在 Angular.js 控制器和 Polymer 自定义元素之间进行通信，而不是触发事件，我会很高兴。
非常感谢你，祝你有美好的一天
编辑：我也可以从 AuthController 内的 DOM 中获取 ng-login-form 元素，并将 AuthController 的登录方法像回调一样传递给某些 ng-long-form 方法。然后在表单提交上，ng-login-form 可以使用输入数据调用回调。
这也可以，但我认为这不是一个好方法。