Angular.js 控制器和 Polymer 自定义元素之间的通信

Question

我在我的一个项目中使用 Angular.js，我想将它与 Polymer 结合使用。我在 Angular.js 控制器和 Polymer 自定义元素之间的通信方面遇到了一些问题。

我的问题是什么...

例如，我有一个 AuthService、一个使用 AuthService 向后端发送请求的 AuthController（带有 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 或 jqLit​​e 获取发送的数据？我更喜欢使用它们而不是使用 html 方法。

如果你能告诉我一种更好的方式在 Angular.js 控制器和 Polymer 自定义元素之间进行通信，而不是触发事件，我会很高兴。

非常感谢您，祝您有愉快的一天

编辑： 我还可以从 AuthController 内部的 DOM 中获取 ng-login-form 元素，并将 AuthController 的登录方法像回调一样传递给某些 ng-long-form 方法。然后在表单提交时，ng-login-form 可以使用输入数据调用回调。

这也可以，但我认为这不是一个好方法。

Answer 1

我是这样解决的

在paper-input中添加 -- inputValue="{{ valData }}" --

例如

<paper-input label="name" id="name" class="label-input-full"  inputValue="{{ valData }}">
</paper-input>

添加按钮提交onclick事件

例如

<paper-button class="btn-check" type="submit" icon="check" core-overlay-toggle on-click="{{fetchDataFromForm}}" >
</paper-button> 

最后在脚本中，添加发送数据到angular的函数

例如

Polymer('name-element', {
    fetchDataFromForm: function() {
      USER_DATA = this.valData;
      console.log(USER_DATA);

        var scope = angular.element($("#angular-controller")).scope();
        scope.$apply(function(){
            scope.contacto = { varAngular: USER_DATA };    
            console.log(scope.contacto);
            scope.angularFunction();
        });
    }
}

在 Angular 中...通常完成

希望对你有所帮助

问候