Question

我在我的一个项目中使用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可以使用输入数据调用回调。

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

Answer 1

我这样解决了

在纸张输入中添加 - 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中...通常已经完成

我希望能为你提供帮助

此致

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

1 个答案: