gabiaxel / ng-polymer-elements Goto Github PK

View Code? Open in Web Editor NEW

383.0 35.0 52.0 10.19 MB

Extendible AngularJS two-way binding support for Polymer elements and web components

Home Page: https://gabiaxel.github.io/ng-polymer-elements/

License: MIT License

JavaScript 100.00%

ng-polymer-elements's Introduction

Looking for maintainers, please contact me if you are interested.

ng-polymer-elements

Documentation and examples

ng-polymer-elements's People

Contributors

Stargazers

Watchers

Forkers

cybernetics hendrixer abdelav latxor karol-f amiiit xblaster bobslaede mightyhorst jonahbron zhanglingkang mrhieu imanzano juddflamm kanchansingh87 paralin vance thibzthibz tiger-ll pkpokemon lambder mronyancha mediamath ifernandosousa wazery hitesh97 robertomalatesta davinirjr lcultx m-creations ericatha kristjanliiva junkoro iday xavierliang nerk bisubus pkdevbox rkobzarev jd009 joandervieira kumarnvm jaichandra teng2015 zero12srl silenthoo carlosharaujo iniftar forky-mcforkface

ng-polymer-elements's Issues

Update to Polymer 1.0

Any plans to update ng-polymer-elements for the newly released Polymer 1.0?

https://www.polymer-project.org/1.0/

Add support for common events (click, focus, keypress...)

paper-checkbox with ngClick bug

The angular/angular.js#4765 issue reports that the ngClick directive is fired before ngModel change propagates to model.

This way, when I click on "check to-do as completed" it saves the prior state of model.

This SO answer and angular docs recommends to change ngClick to ngChange, but when I tried, it won't worked.

There is a way to make ngChange work with paper-checkbox?

Models of type 'array' not working

Changes to the data model of type array inside a polymer element are not reflected back to angular. I had to change the handler function as follows to get it working:

var handler = function (value) {
               //if (conf.primitive) {
                   el[propertyName] = value;
               //} else {
                    //angular.copy(value, el[propertyName]);
                //}
};

Tested with Polymer 0.4.2.

Add mapping for core-dropdown

http://www.polymer-project.org/docs/elements/core-elements.html#core-dropdown
Added in Polymer 0.3.5

Look into possible services to wrap dialog and toast

not working with angular-fullstack generator

Hi! I installed this in an angular-fullstack project to try it out, and I can't get any polymer elements to work.

Repro:
% yo angular-fullstack (coffeescript, jade, ui-router, no bootstrap, no mongo)
% bower install --save ng-polymer-elements
add 'ng-polymer-elements' to module dependencies in app.coffee

in app/main/main.jade, replace all content with:

div
  paper-slider(ng-model="foo", max="5")

No paper slider appears.

Also tried:
adding <script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
to index.html in <head> tag

Is there something obvious I'm missing?

Problem adding elements of ng-polymer-elements into an angular project

Typo in paper-button example

Small typo, but due to me just copy pasting I spend a bit of time figuring out what was wrong.

<paper-button on-click="buttonAction()" raised>
    {{ctrl.buttonLabel}}
</paper-button>

Should be ng-click instead of on-click.

ngPE does not work on Polymer ^0.5.0

Hello guys,

I tested the component against 0.5.0 and 0.5.1, where

<paper-input ng-model="whatever"></paper-input>

Does not work. On 0.4.2 and bellow works fine.

Looking at source code, I found that paper-input was splitted in 2 components: the paper-input-decorator and the paper-input with input[is="core-input"], and they changed the value attribute from inputValue to value.

To workaround this, I added the following:

window.NG_POLYMER_ELEMENTS_EXTENDED_MAPPINGS = {
    paperInput: {
        ngModel: {
            primitive: 'value'
        }
    }
}

Before <script src=".../ng-polymer-elements.js"></script> and it works fine again.

I'm not sure if other components changed too.

Cannot have multiple primitives

I was working on adding the core-drawer-panel to the list and it has multiple primitives that you can bind to (selected and responsiveWidth). I think a better solution might be to switch the keys and values within your ngModel object so that it resembles {selected: 'primitive', responsiveWidth: 'primitive'} and the ng-model would be set as an object of values instead of the specific values.

Personal Inquiry to @GabiAxel

Can you provide a new-element.html for your example?

The example of wiring up a custom element at the end of the readme is helpful - I think it would be very useful if you would include the new-element.html file so we can see the attributes you publish, etc.

Installation Failure

I can't seem to get this module installed successfully.

This is my output without your module: https://gist.github.com/Xerosigma/25b79f8267b8154e5c4b#file-without

This is my output with your module: https://gist.github.com/Xerosigma/25b79f8267b8154e5c4b#file-with

Is this a problem with my dependencies?

{
  "name": "web-starter-kit",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.2.0",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "angular-resource": "~1.2.0",
    "angular-cookies": "~1.2.0",
    "angular-sanitize": "~1.2.0",
    "angular-animate": "~1.2.0",
    "angular-touch": "~1.2.0",
    "angular-route": "~1.2.0",
    "angular-hateoas": "https://github.com/jmarquis/angular-hateoas.git",
    "polymer": "Polymer/polymer#~0.4.1",
    "paper-elements": "Polymer/paper-elements#~0.4.1",
    "angular-base64": "~2.0.2",
    "google-map": "GoogleWebComponents/google-map#~0.3.1",
    "angular-spring-data-rest": "~0.2.0",
    "ng-polymer-elements": "~0.1.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.2.0",
    "angular-scenario": "~1.2.0"
  },
  "appPath": "app",
  "resolutions": {
    "platform": "^0.3.0",
    "core-component-page": "^0.3.0"
  }
}

Object.observe warning

Hi,

we are using ng-polymer-elements for a while, but lately we have this console warning:

'Object.observe' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/6147094632988672 for more details.

Do you have plans to replace it?

Thanks.

Project Maintenance Inquiry

Not working when ng-model is an Object

PathObserver does not work for Objects.... The next code works well for me (Chrome 37):

// Copy the web component's value to the scope 
// property value
if (conf.object) {
    var observer = new ObjectObserver(el[propertyName]);
    observer.open(function (added, removed, changed, getOldValueFn) {                                     
        Object.keys(changed).forEach(function (property) {
         if (property != "$promise" && property != "$resolved")
             scope.$apply( function() {
                 angular.copy(el[propertyName], scope[attr]);
             });
         });
     });
 } else {
     var observer = new PathObserver(el, propertyName);
     observer.open(function(value) {
         scope.$apply(function() {
             if (conf.primitive) {
                 scope[attr] = value;
             } else {
                 angular.copy(value, scope[attr]);
             }
         });
     });
 }

Example site

It would be useful to see a place where I can see ng-polymer-elements in action without having to clone it and open a static web server myself.

This seems like it'd be quite straight-forward by using gh-pages.

'ng' attribute namespace

I suggest to translate directive attributes to custom namespace instead of 'ng'.

Using 'ng' in third-party extensions is unconventional, and I don't see it as a problem. The problem is that several core directives (ngModel, ngDisabled, etc.) are compiled on irrelevant elements, which is redundant or even harmful.

Another problem is that the code looks misleading when irrelevant ng-model or non-existing ng-* directives are featured.

Unprefixed loading attribute adds inconsistency. Was it by intention? There are other prefixed attributes that share the names with polymer elements (e.g ng-disabled).

I treated it like that for now. It is a bit dirty, but since the extension uses ES5, there are no computed properties, and regexp should be used anyway to prefix the attributes (it could be omitted if there were no unprefixed attributes like loading).

And the usage is

angular.module('ng-polymer-elements').constant('$ngPolymerPrefix', 'pe');

I guess that the extension could keep 'ng' as default prefix for now and feature breaking changes at any moment when appropriate.

And thank you for tremendous work, it is appreciated.

Invalid Mapping error when using min.js version with paper-menu element.

My code was as follows:

<paper-menu ng-model="mediaType" class="dropdown-content">  
     <paper-item>Video</paper-item>   
     <paper-item>Image</paper-item>   
</paper-menu>

Using ng-polymer-elements.min.js, I would receive the following error:
Invalid mapping for "ngModel" - function name must be "property" or "event"

Using the ng-polymer-elements.js file (the full version), I do not see the error.

I dug into it and when Uglify passes over ng-polymer-elements.js, it converts this:

var multiSelectableMappings = {  
    ngModel: function property(element) {  
    return element.hasAttribute('multi') ? 'selectedValues' : 'selected';  
  }  
};

into

multiSelectableMappings={ngModel:function(element){return element.hasAttribute("multi")?"selectedValues":"selected"}}

This unfortunately deletes the function name "property" which makes the following code throw the exception:

case 'function':  
  switch(mapped.name) {  
  case 'property':  
    mappingType = '=';  
    break;  
  case 'event':  
    mappingType = '&';  
    break;  
  default:  
    throw 'Invalid mapping for "' + attr  
      + '" - function name must be "property" or "event"';  
  }

The mapped.name does not find the name 'property' in the function because Uglify removed it.

ng-polymer-elements actually require Angular ^1.4.0?

I'm using ng-polymer-elements in a project with Polymer 1.0 and Angular 1.3.17 and it's working just fine. Are there any features of 1.4.1+ you're using that actually makes it a hard dependency on 1.4?

Unable to access Project's settings

Migrating ng-polymer-elements to Angular 2

I wonder if there is any plan of migrating this compact module to Angular 2, yet?

Need to update to webcomponents.js

In Polymer 0.5.1 we moved from using platform.js to webcomponents.js. I noticed the docs are still referring to platform.js. Would it be possible to update to point at the new set of polyfills?

Paper-input does not work bidirectionally in Firefox

Using the input, core-input, and paper-input example from the documentation, I find that paper-input does not work correctly in Firefox.

If I type in either the input or the core-input all three change. However if I type in the paper-input the other two remain unchanged.

If I run it in Chrome, changing any of the three reflects in all three.

Polymer: 0.5.5
Firefox: 36.0

index.html:

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="bower_components/observe-js/src/observe.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/ng-polymer-elements/ng-polymer-elements.min.js"></script>
<div ng-app="ng-polymer-elements">
    <link rel="import" href="bower_components/paper-input/paper-input.html" />

    <input type="text" ng-model="text" />
    <input is="core-input" ng-model="text" />
    <paper-input ng-model="text"></paper-input>
</div>

ng-model with iron-media-query

Is it working for anybody with iron-media-query element?
I'm working with ng-polymer-element for default elements and also including my own components without any problem. It's working really well, but when I've try to use it with iron-media-query I didn't get any result at the scope.

iron-media-query is working properly in its own dom-bind template. So I discard any malfunction of that element.

So my code:

Definition of property to bind:

angular.module('ng-polymer-elements').constant('$ngPolymerMappings', {
    ironMediaQuery : {
        ngModel: '=query-matches'
    }
});

And then I use it at my element as follows:

<iron-media-query query="(min-width: 630px)" ng-model="isBigScreen"></iron-media-query>

But isBigScreen property doesn't appear at my $scope.

Versions I'm using:
*AngularJS 1.4.4
*Polymer 1.1
*ng-polymer-elements 0.3.0

angular-bind-polymer

Hi!

Great solution!
I've just found out also about angular-bind-polymer (https://github.com/eee-c/angular-bind-polymer).
What do you think is best (probably yours) and why? would love to hear your thoughts before picking the right one...

I would prefer to be as close to Polymer as possible (this is also why I think your solution is so much better than angular's material design....)

Thanks!

Adding support for custom object

I am trying to add a custom object to ng-polymer-elements. I have added the following:

.constant('$ngPolymerMappings',{ highchartsChart: { ngModel: function property(element) { return 'data'; } } });
However, when I run the app I get "Object.observe is not a function at attachObserver". It is probably an issue with the custom element, but I don't know what. Any ideas?

Core animated pages?

I just figured I'd mention it because I'm going to try it - using core animated pages with angular. I'd like to continue using UI router. So the different sections will be different views. Anyway - if you or anyone has already done it, please share a tip or how you might approach it. Thanks!

Toggle isn't updating inside ng-click

With ng-polymer-elements, and this setting:

<paper-toggle-button ng-model="myModel" ng-click="doSomething();">
</paper-toggle-button>

Inside doSomething I'm getting the previous value of checked instead of the current one.

$scope.$watch on myModel works as expected though.

Any ideas why?

blank screen

I am new to the whole polymer world, but I have an existing angular project that I was trying to incorporate your element into, but I must be doing something wrong, because I get a blank screen. i downloaded the code from the polymer website, added your .js file and included it into my app module. All my content is wiped out and I see a blank screen.

Can you provide any assistance?

Who's using this project?

If you're a consumer using this project, can you reply to this post so we can see how it's being used?

...I'm doing a quick survey of some of the projects listed on Maintainers Wanted to gauge activity.

paper-textarea Not working with ng-model

paper-textarea is not working with ng-model, But it works with paper-input as expected. paper-textarea version 1.0.11

Fix paper input when initial value is 0

Always got error PathObserver is not defined.

Am using ng-polymer-elements with angularjs.I installed it using bower.But when am using this ng-polymer-elements dependency in my angular app.I got this

I have included ng-polymer-elements.min.js library.But don't know what is wrong here or something missing here.

browserify: ng-polymer-elements

I tried browserify-shim ng-polymer-elements but it doesnt seem to work...

Is this something you consider supporting in the future, either browserify og just browserify-shim ?

Add support for "disabled" attribute

paper-checkbox won't start as true

Hi there,

paper-checkbox seems to not really want to initialized with a variable set to true in the controller.

It always appears as unchecked, and upon first click, animates briefly and stays untoggled. Subsequent toggles work as expected.

ng-checked not working for paper-checkbox

Hello, first of all thanks for this project. I have a problem with the directive ng-checked on an element paper-checkbox.

<!-- On initial load checkbox is not checked -->
<paper-checkbox ng-checked="testVariable == 42"></paper-checkbox>

app.controller(
      'TestController', ['$scope', function TestController($scope) {
         $scope.testVariable = 42;
      }]
);

but in this example ng-checked works with paper-checkbox OK:

<input type="text" ng-model="valFromUser" placeholder="Type '42'">
<!-- If valFromUser == 42, paper-checkbox IS checked -->
<paper-checkbox ng-checked="valFromUser == 42"></paper-checkbox>

Plunker demo: http://plnkr.co/edit/9M7UrpE6KRGLoiN2H6dZ?p=preview

Tested with Chrome 40 (beta) and Firefox 34. Angular 1.3.6, Webcomponents 0.5.1-1.

is this working in firefox?

Your demo is not all working (some bits do) in Firefox is it in intended to?

ReferenceError: 'PathObserver' is undefined

this module works perfectly in chrome but it isn't working with Internet Explorer despite the late bootstrap call. I have this:

<!DOCTYPE html>
<html lang="en" >
<head>
    <title>my app</title>
    <base href="/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <script type="text/html" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="elements.html">
    <link rel="stylesheet" href="style.css">
</head>
<body unresolved fullbleed layout vertical ng-app="myApp" ng-controller="myController">
  <core-scaffold>
...
  </core-scaffold>
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/ng-polymer-elements/ng-polymer-elements.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

and app.js has this:

function bootstrap() {
   angular.bootstrap(wrap(document), ['myApp']);
}
if(angular.isDefined(document.body.attributes['unresolved'])) {
   var readyListener = function() {
      bootstrap();
      window.removeEventListener('polymer-ready', readyListener);
   }
   window.addEventListener('polymer-ready', readyListener);
} else {
   bootstrap();
}

but still got the PathObserver error. Am I using it wrong?

Ngpolymer and paper-card

I'm trying to using ng polymer with paper card elements. Could someone help me with that? Actually I'm using ng-repeat for paper-card but only the heading attributes works when I use {{}} from angular I would like to use {{ }} in the inner tags card-content and card-actions but don't seems to work. Thanks

[HELP] error happended when used in ngRoute

below is source code.

app.js

angular
  .module('heloApp', [
    'ngRoute',
    'ng-polymer-elements'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/main', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

index.html

...
<body unresolved ng-app="heloApp">
      <div class="main-container" ng-view=""></div>

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/platform/platform.js"></script>
    <script src="bower_components/ng-file-upload/angular-file-upload-shim.min.js"></script>
    <script src="bower_components/ng-file-upload/angular-file-upload.min.js"></script>

    <script src="scripts/ng-polymer-elements.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/login.js"></script>
...

angular.module('heloApp').controller('LoginCtrl', ['$scope', function($scope){
......
}])

<core-header-panel mode="medium-tall">
    <div class="core-header">
        <span>Helo</span>
    </div>
    <div class="content" vertical layout center>
        <paper-input label="Your Name" ng-model="userid"></paper-input>
        <paper-input type="password" label="Your Password"></paper-input>
        <paper-button raised ng-click="login()">Login</paper-button>
    <core-ajax id="ajax"></core-ajax>
    </div>
</core-header-panel>

Below is error info.

ReferenceError: PathObserver is not defined
    at http://localhost:9000/scripts/ng-polymer-elements.js:154:50
    at Array.forEach (native)
    at angular.module.config.Object.keys.forEach.$compileProvider.directive.link (http://localhost:9000/scripts/ng-polymer-elements.js:105:28)
    at http://localhost:9000/bower_components/angular/angular.js:8188:44
    at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8194:9)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7706:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7062:13)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7065:13)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7065:13)
    at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:6941:30) <paper-input label="Your Name" ng-model="userid" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">

How should I use ng-polymer-elements in ngRoute?
Can you give me a example?
Thanks!

manual bootstrapping is failing unit-tests

Karma is creating it's own document object that returns nothing to the query:

document.querySelectorAll('[ng-app]')

Here is my output

INFO [karma]: Karma v0.12.23 server started at http://localhost:9018/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 37.0.2062 (Mac OS X 10.9.4)]: Connected on socket XyrIshg9JI3tU0HaLt4N with id 87984048
Chrome 37.0.2062 (Mac OS X 10.9.4) ERROR
  Uncaught TypeError: undefined is not a function
  at /Users/amit/workspace/campact/kb-ui-mailing/vendor/ng-polymer-elements/ng-polymer-elements.js:178

document.querySelectorAll('[ng-app]').array()

Hi!
This line is failing in firefox 32 (ubuntu 14.04):

document.querySelectorAll('[data-ng-app]').array().forEach(function(element) {
...

querySelectorAll returns a NodeList. array function is undefined for NodeList in firefox. 8(
Using a traditional for loop instead of array().forEach() makes the miracle!:

var apps = document.querySelectorAll('[data-ng-app]');
for (var i = 0; i < apps.length; i++) {
    var element = apps[i];
    // }

    // document.querySelectorAll('[data-ng-app]').array().forEach(function(element) {
    var app = element.getAttribute('data-ng-app');
    element.removeAttribute('data-ng-app');

    //function bootstrap() {
    //  angular.bootstrap(wrap(element), [app]);
    //}

    if (angular.isDefined(document.body.attributes['unresolved'])) {
        var readyListener = function() {

            //bootstrap();
            angular.bootstrap(wrap(element), [app]);
            window.removeEventListener('polymer-ready', readyListener);
        };
        window.addEventListener('polymer-ready', readyListener);
    } else {
        //bootstrap();
        angular.bootstrap(wrap(element), [app]);
    }

    //});
}

ng-polymer-element to use in normal form post method

Is it possible to use HTML element id and name to grab the value from a post method other than Angular two way binding. Just to use plain with CodeIgniter Framework. Because polymer element it self didn't work when I tried to make form post to a PHP. (Couldn't get the element POST value from php end). Anyway thanks for you great contribution for making possible to use Polymer element with Angular JS.

Support for multiple data bindings

I have a created a simple age-slider web component which accepts name and age. Something like below.

<age-slider name="Venu" age="34"/>

So wanted to use this with Angular. With ng-polymer-elements i could only bind one variable.

<age-slider ng-model="name" age="34"/>

Is it possible to bind two variables with ng-polymer-elements?

ng-model-options

Hi,
I've been working with ng-polymer-elements for a while, with great results, even with my custom elements. Now I'm trying to achieve a ng-model-options configuration to delay a paper-input via debounce, but without success.

Is anybody out there using ng-model-options with success?

My code looks like:

<paper-input ng-model="myLabel" ng-model-options="{ debounce: 1000 }" ></paper-input>

Thanks a lot

Failed trying to use it in Safari (Error: el.getPropertyInfo is not a function. )

When I use it in Safari I got this error:

Any idea how to workaround it ?