Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added attributes angularEquals and onlyAngularToPolymer #42

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added attributes angularEquals and onlyAngularToPolymer #42

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 68 additions & 59 deletions ng-polymer-elements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

angular.module('ng-polymer-elements', [])
.config(['$compileProvider', '$injector', function($compileProvider, $injector) {

'use strict';

// Each mapping is an object where the key is the directive/custom element
// name in camel case and the value is an object where the keys are the
// AngularJS attributes in camel case and the values are objects where the
// key is the type which can be 'primitive', 'object', 'array' or 'event'
// AngularJS attributes in camel case and the values are objects where the
// key is the type which can be 'primitive', 'object', 'array' or 'event'
// and the value is the name of the attribute in the web component.

var inputMappings = {
Expand All @@ -19,13 +19,13 @@
primitive: 'disabled'
}
};

var selectorMappings = {
ngModel: {
primitive: 'selected'
}
};

var checkMappings = {
ngModel: {
primitive: 'checked'
Expand All @@ -34,7 +34,7 @@
primitive: 'disabled'
}
};

var openableMappings = {
ngOpened: {
primitive: 'opened'
Expand Down Expand Up @@ -63,115 +63,124 @@
}
}
};

// Extension point for overriding mappings

if($injector.has('$ngPolymerMappings')) {
var extendedMappings = $injector.get('$ngPolymerMappings');
angular.extend(allMappings, extendedMappings);
}

// A directive is created for each web component according to the mappings

Object.keys(allMappings).forEach(function(tag) {
var mappings = allMappings[tag];

$compileProvider.directive(tag, ['$parse', '$window', function($parse, $window) {

var scopeDefinition = {};

var keys = Object.keys(mappings);

keys.forEach(function(attr) {

var conf = mappings[attr];

if(conf.primitive || conf.object || conf.array) {
scopeDefinition[attr] = '=';
} else if(!conf.event) {
throw 'Invalid mapping for ' + attr +
throw 'Invalid mapping for ' + attr +
' - must contain primitive | object | array | event';
}
});

return {
restrict: 'E',
scope: scopeDefinition,

link: function (scope, element, attrs) {

var el = element[0];

keys.forEach(function(attr) {

// Don't create bindings for non-existent attributes
if(!attrs[attr]) {
return;
}

var conf = mappings[attr];

if(conf.event) {

var fn = $parse(attrs[attr]);

el.addEventListener(conf.event, function (e) {
scope.$apply(function() {
fn(scope.$parent, {$event: e});
});

});

} else {
var propertyName =

var propertyName =
conf.primitive || conf.object || conf.array;


var onlyAngularToPolymer = (attrs.onlyangulartopolymer === "true");

if(conf.object) {
el[propertyName] = {};
} else if(conf.array) {
el[propertyName] = [];
}
// Copy the scope property value to the web

// Copy the scope property value to the web
// component's value

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

scope.$watch(attr, handler, true);


var angularEquals = (angular.isUndefined(attrs.angularequals) ||
attrs.angularequals === "true");

scope.$watch(attr, handler, angularEquals);

handler(scope[attr]);
// Copy the web component's value to the scope

// Copy the web component's value to the scope
// property value

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


if (!onlyAngularToPolymer) {
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]);
}
});
});
}

}

});
}

};
}]);
});

}]);

})(angular);