Trying Recompiling Angular Directives to see Polymer Changes

I am still trying to get my AngularJS application to bind to my <x-pizza> Polymer element. It is fairly easy to push changes from Angular down into my Polymer via normal binding, but two way binding thus far has eluded me.

Actually, after last night, I have a solution that relies on an Angular directive that triggers its own $apply, but I would rather just have Angular recognize that $apply needs to be called during its normal course of operations.

Today, I am thinking that Angular is not aware of my Polymer's attribute changing because the attribute is redefined after Angular finishes binding. So I try recompiling:

directive('polymerDirective', function($timeout, $compile) {
  return {
    restrict: 'A',
    link : function(scope, element, attrs) {
      element.removeAttr('polymer-directive');
      element.attr('delayed-polymer','');
      $timeout(
        function(){
            //debugger
          var el = element.parent().children()[0];
          $compile(el)(scope);
        },
        500
      );
    }
  };

After half a second, I recompile the attribute with a new directive:

directive('delayedPolymer', function() {
  return {
    restrict: 'A',
    link : function(scope, element, attrs) {
      console.log('yo ' + attrs.state);
      scope.$watch(
        'attrs.state',
        function(value) {
          console.log('change seen');
          scope.pizzaState = value;
        }
      );
    }
  };
}).

But that still does not quite work. Even delaying the application of the directive until Polymer has done its initialization thing does not enable Angular to watch changes on the Polymer's attribute. It seems that last night's solution may be the best that I can do for now.

Day #1,010

‹prev | My Chain | next›