How To have two way binding with angularJs ?

394 views
Skip to first unread message

ignacio...@gmail.com

unread,
Oct 16, 2014, 3:30:06 PM10/16/14
to polym...@googlegroups.com
Hi,

I have a code like this


<form ng-controller="MyController">
...   
    <paper-radio-group  selected="opt1" id="options">
            <paper-radio-button name="opt1"
                                label="A"
                                ng-model="myValue"></paper-radio-button>
            <paper-radio-button name="opt2"
                                label="B"
                                ng-model="myValue"></paper-radio-button>
    </paper-radio-group>
    <paper-button ng-click="saveValues()">Continue</paper-button>
...
</form>



I want to make the binding between the controller values and the polymer elements. But I was not able to make it work.  Using the previous code when I click on the paper-button the var myValue never has the paper-radio value selected. I try

Enter cod<paper-radio-group  selected="{{myValue}}" id="options">e here...

But I does not work

My Angularjs controller es a very basic one

angular.module('myApp')
    .controller('MyController', function ($scope) {

        $scope. myValue ='op2';

        $scope. saveValues = function() {            
            console.log($scope. myValue);           
        };
 
    });


Any idea what I'm doing wrong ?

Best
Ignacio



Eric Bidelman

unread,
Oct 16, 2014, 3:37:31 PM10/16/14
to Ignacio Manzano, polymer-dev
Angular doesn't understand 2-way bindings to attributes. You need something like https://github.com/matjaz/angu-poly to get this working.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b5aa6b78-1ec7-4337-9c61-e3b5e917e932%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

ignacio...@gmail.com

unread,
Oct 21, 2014, 6:58:04 AM10/21/14
to polym...@googlegroups.com, ignacio...@gmail.com
Its perfect.

One more question. If I want to fill a paper-dropdown-menu like this

<paper-dropdown-menu  valueattr="label">
                    <paper-item angupoly="{label:'country}"  ng-repeat="country in countries"></paper-item>
</paper-dropdown-menu>

Can I do it ? or how can I fill paper combo boxes with angupoly ?

thanks!

ignacio...@gmail.com

unread,
Oct 21, 2014, 7:08:21 AM10/21/14
to polym...@googlegroups.com, ignacio...@gmail.com
Hi

I was able to do it easily with

<paper-item  ng-repeat="f in countries" label="{{f}}" ></paper-item>

thanks!

ignacio...@gmail.com

unread,
Oct 28, 2014, 10:20:54 AM10/28/14
to polym...@googlegroups.com, ignacio...@gmail.com
Hi,

I'm usign angupoly a lot, but I figure it out that does not work on Safari and Firefox.

I got the following error 

Error: undefined is not a function (evaluating 'el.bind(attrName, new PathObserver(scope, paths[attrName]))')
onreadystatechange@http://localhost:8088/bower_components/angular/angular.min.js:79:25 <paper-input class="settings_input" angupoly="{value:'uai.email'}">

any idea? 

This is how Im loading my js

<script src="bower_components/es5-shim/es5-shim.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>

<!-- build:js scripts/angupoly.js -->
<script src="scripts/angupoly.js"></script>
<!-- endbuild -->

<!-- build:js scripts/common/model.js -->
<script src="scripts/common/model.js"></script>
<!-- endbuild -->

<!-- build:js scripts/common/common.js -->
<script src="scripts/common/common.js"></script>
<!-- endbuild -->

<!-- build:js scripts/settingsApp.min.js -->
<script src="scripts/settingsApp.js"></script>
<script src="scripts/controllers/settingsController.js"></script>
<script src="scripts/services/SettingsService.js"></script>
<!-- endbuild -->

Ignacio Manzano

unread,
Oct 28, 2014, 10:30:45 AM10/28/14
to polymer-dev, Ignacio Manzano
More Information. Using demo in the angupoly page (http://plnkr.co/Wb31bj)

In safari I got this error

Error: Attempted to assign to readonly property.

And the polymer box in the demo is empty.

Eric Bidelman

unread,
Oct 28, 2014, 11:25:28 AM10/28/14
to Ignacio Manzano, polymer-dev
You need to load platform.js/webcomponents.js to support polyfill'd browsers.
It also needs to be the first script loaded on the page.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAGwniLrJ99uX%2BLNmQWvvZMZFoD8dJn9Y8wsf_omMDD4aYjeukw%40mail.gmail.com.

Ignacio Manzano

unread,
Oct 28, 2014, 1:38:58 PM10/28/14
to Eric Bidelman, polymer-dev
I did it. I have the js at first js in my webpage... Im using polymer 0.4.2

<script src="bower_components/platform/platform.js"></script>

its really rare. Also the provided demo does not work on safari.

Any idea?

ignacio...@gmail.com

unread,
Oct 29, 2014, 4:34:14 PM10/29/14
to polym...@googlegroups.com, ignacio...@gmail.com
I was not able to make angupoly work on safari/firefox. So I research a little and I found ng-polymer-elements.


I just change my code and it works. Also , I can use ng-model directive to bind the variables.

Best
Ignacio
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages