Angular.js 컨트롤러와 Polymer 맞춤 요소 간 통신

Question

내 프로젝트 중 하나에서 Angular.js를 사용 중이며이를 Polymer와 결합하려고합니다. Angular.js 컨트롤러와 Polymer 맞춤 구성 요소 간의 통신에 몇 가지 문제가 있습니다.

내 문제는 무엇인가

... 예를 들어

I 백엔드 (익스프레스와 Node.js를)과 같은 간단한 로그인 폼에 요청을 보낼 AuthService를 사용하는 AuthService, AuthController 있습니다

를

<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-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의 login 메소드를 사용하면 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-로그인 형식의 요소의 취득 및 일부 ng-에 콜백처럼 AuthController의 로그인 방법을 전달할 수 있습니다 긴 형식의 방법. 그런 다음 양식 제출시 ng-login-form이 입력 데이터로 콜백을 호출 할 수 있습니다.

이렇게해도 작동하지만 이것은 좋은 접근 방법이라고 생각하지 않습니다.

Answer 1

나는 이런 식 용지 입력 추가에

를 해결 - inputValue의 = "{{valData}}"- 예를

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

에 대한

는 온 클릭 제출 버튼에 추가 예를 들어 이벤트

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

마지막으로 스크립트에서, 각도에

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(); 
     }); 
    } 
} 

... 보통 내가 뭔가에 도움이 희망

일을 예를 들어 각

에 송신 데이터의 함수를 추가

감사합니다