fix(ng1.component): Allow route-to-component "@" and optional bindings

Closes #2708

src/common/strings.ts

@@ -35,7 +35,11 @@ export function padString(length: number, str: string) {
  return str;
 }
 
-export const kebobString = (camelCase: string) => camelCase.replace(/([A-Z])/g, $1 => "-"+$1.toLowerCase());
+export function kebobString(camelCase: string) {
+ return camelCase
+ .replace(/^([A-Z])/, $1 => $1.toLowerCase()) // replace first char
+ .replace(/([A-Z])/g, $1 => "-" + $1.toLowerCase()); // replace rest
+}
 
 function _toJson(obj) {
  return JSON.stringify(obj);

src/ng1/viewsBuilder.ts

@@ -45,12 +45,19 @@ export function ng1ViewsBuilder(state: State) {
  throw new Error(`Cannot combine: ${compKeys.join("|")} with: ${nonCompKeys.join("|")} in stateview: 'name@${state.name}'`);
  }
 
- // Dynamically build a template like "<component-name input1='$resolve.foo'></component-name>"
+ // Dynamically build a template like "<component-name input1='::$resolve.foo'></component-name>"
  config.templateProvider = ['$injector', function($injector) {
  const resolveFor = key => config.bindings && config.bindings[key] || key;
  const prefix = angular.version.minor >= 3 ? "::" : "";
- let attrs = getComponentInputs($injector, config.component)
- .map(key => `${kebobString(key)}='${prefix}$resolve.${resolveFor(key)}'`).join(" ");
+ const attributeTpl = input => {
+ var attrName = kebobString(input.name);
+ var resolveName = resolveFor(input.name);
+ if (input.type === '@')
+ return `${attrName}='{{${prefix}$resolve.${resolveName}}}'`;
+ return `${attrName}='${prefix}$resolve.${resolveName}'`;
+ };
+
+ let attrs = getComponentInputs($injector, config.component).map(attributeTpl).join(" ");
  let kebobName = kebobString(config.component);
  return `<${kebobName} ${attrs}></${kebobName}>`;
  }];
@@ -70,27 +77,21 @@ export function ng1ViewsBuilder(state: State) {
  return views;
 }
 
-// for ng 1.2 style, process the scope: { input: "=foo" } object
+// for ng 1.2 style, process the scope: { input: "=foo" }
+// for ng 1.3 through ng 1.5, process the component's bindToController: { input: "=foo" } object
 const scopeBindings = bindingsObj => Object.keys(bindingsObj || {})
- .map(key => [key, /^[=<](.*)/.exec(bindingsObj[key])])
- .filter(tuple => isDefined(tuple[1]))
- .map(tuple => tuple[1][1] || tuple[0]);
-
-// for ng 1.3+ bindToController or 1.5 component style, process a $$bindings object
-const bindToCtrlBindings = bindingsObj => Object.keys(bindingsObj || {})
- .filter(key => !!/[=<]/.exec(bindingsObj[key].mode))
- .map(key => bindingsObj[key].attrName);
+ .map(key => [key, /^([=<@])[?]?(.*)/.exec(bindingsObj[key])]) // [ 'input', [ '=foo', '=', 'foo' ] ]
+ .filter(tuple => isDefined(tuple) && isDefined(tuple[1])) // skip malformed values
+ .map(tuple => ({ name: tuple[1][2] || tuple[0], type: tuple[1][1] }));// { name: ('foo' || 'input'), type: '=' }
 
 // Given a directive definition, find its object input attributes
 // Use different properties, depending on the type of directive (component, bindToController, normal)
 const getBindings = def => {
  if (isObject(def.bindToController)) return scopeBindings(def.bindToController);
- if (def.$$bindings && def.$$bindings.bindToController) return bindToCtrlBindings(def.$$bindings.bindToController);
- if (def.$$isolateBindings) return bindToCtrlBindings(def.$$isolateBindings);
  return <any> scopeBindings(def.scope);
 };
 
-// Gets all the directive(s)' inputs ('=' and '<')
+// Gets all the directive(s)' inputs ('@', '=', and '<')
 function getComponentInputs($injector, name) {
  let cmpDefs = $injector.get(name + "Directive"); // could be multiple
  if (!cmpDefs || !cmpDefs.length) throw new Error(`Unable to find component named '${name}'`);

test/ng1/viewDirectiveSpec.js

@@ -804,6 +804,16 @@ describe('angular 1.5+ style .component()', function() {
  bindings: { status: '<' },
  template: '#{{ $ctrl.status }}#'
  });
+
+ app.component('bindingTypes', {
+ bindings: { oneway: '<oneway', twoway: '=', attribute: '@attr' },
+ template: '-{{ $ctrl.oneway }},{{ $ctrl.twoway }},{{ $ctrl.attribute }}-'
+ });
+
+ app.component('optionalBindingTypes', {
+ bindings: { oneway: '<?oneway', twoway: '=?', attribute: '@?attr' },
+ template: '-{{ $ctrl.oneway }},{{ $ctrl.twoway }},{{ $ctrl.attribute }}-'
+ });
  }
  }));
 
@@ -993,6 +1003,42 @@ describe('angular 1.5+ style .component()', function() {
 
  expect(log).toBe('onInit;');
  });
+
+ it('should supply resolve data to "<", "=", "@" bindings', function () {
+ $stateProvider.state('bindingtypes', {
+ component: 'bindingTypes',
+ resolve: {
+ oneway: function () { return "ONEWAY"; },
+ twoway: function () { return "TWOWAY"; },
+ attribute: function () { return "ATTRIBUTE"; }
+ },
+ bindings: { attr: 'attribute' }
+ });
+
+ var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
+
+ $state.transitionTo('bindingtypes'); $q.flush();
+
+ expect(el.text()).toBe('-ONEWAY,TWOWAY,ATTRIBUTE-');
+ });
+
+ it('should supply resolve data to optional "<?", "=?", "@?" bindings', function () {
+ $stateProvider.state('optionalbindingtypes', {
+ component: 'optionalBindingTypes',
+ resolve: {
+ oneway: function () { return "ONEWAY"; },
+ twoway: function () { return "TWOWAY"; },
+ attribute: function () { return "ATTRIBUTE"; }
+ },
+ bindings: { attr: 'attribute' }
+ });
+
+ var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
+
+ $state.transitionTo('optionalbindingtypes'); $q.flush();
+
+ expect(el.text()).toBe('-ONEWAY,TWOWAY,ATTRIBUTE-');
+ });
  }
  });