fixup! feat($compile): add support for arbitrary property and event bindings

Author: Jason Bedard

src/ng/compile.js

@@ -3494,11 +3494,16 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
             return $sce.valueOf(val);
           });
 
-          return function ngPropPreLinkFn(scope, $element) {
-            scope.$watch(ngPropWatch, function propertyWatchActionFn() {
-              var value = ngPropGetter(scope);
-              $element.prop(propName, sanitizer(value));
-            });
+          return {
+            pre: function ngPropPreLinkFn(scope, $element) {
+              function applyPropValue() {
+                var propValue = ngPropGetter(scope);
+                $element.prop(propName, sanitizer(propValue));
+              }
+
+              applyPropValue();
+              scope.$watch(ngPropWatch, applyPropValue);
+            }
           };
         }
       });

test/ng/ngPropSpec.js

@@ -57,10 +57,6 @@ describe('ngProp*', function() {
   it('should work with different prefixes', inject(function($rootScope, $compile) {
     $rootScope.name = 'Misko';
     var element = $compile('<span ng:prop:test="name" ng-Prop-test2="name" ng_Prop_test3="name"></span>')($rootScope);
-    expect(element.prop('test')).toBeUndefined();
-    expect(element.prop('test2')).toBeUndefined();
-    expect(element.prop('test3')).toBeUndefined();
-    $rootScope.$digest();
     expect(element.prop('test')).toBe('Misko');
     expect(element.prop('test2')).toBe('Misko');
     expect(element.prop('test3')).toBe('Misko');
@@ -77,12 +73,6 @@ describe('ngProp*', function() {
     $rootScope.name = 'Misko';
     var element = $compile('<span data-ng-prop-test2="name" x-ng-prop-test3="name" data-ng:prop-test4="name" ' +
       'x_ng-prop-test5="name" data:ng-prop-test6="name"></span>')($rootScope);
-    expect(element.prop('test2')).toBeUndefined();
-    expect(element.prop('test3')).toBeUndefined();
-    expect(element.prop('test4')).toBeUndefined();
-    expect(element.prop('test5')).toBeUndefined();
-    expect(element.prop('test6')).toBeUndefined();
-    $rootScope.$digest();
     expect(element.prop('test2')).toBe('Misko');
     expect(element.prop('test3')).toBe('Misko');
     expect(element.prop('test4')).toBe('Misko');
@@ -117,7 +107,6 @@ describe('ngProp*', function() {
     });
     inject(function($compile, $rootScope) {
       $compile('<div attr-exposer ng-prop-title="12" ng-prop-super-title="34" ng-prop-my-camel_title="56">')($rootScope);
-      $rootScope.$digest();
 
       expect(attrs.title).toBeUndefined();
       expect(attrs.$attr.title).toBeUndefined();
@@ -147,7 +136,6 @@ describe('ngProp*', function() {
     });
     inject(function($compile, $rootScope) {
       $compile('<div attr-exposer ng-prop-title="42" ng-attr-title="foo" title="bar">')($rootScope);
-      $rootScope.$apply();
       expect(attrs.title).toBe('foo');
       expect(attrs.$attr.title).toBe('title');
       expect(attrs.$attr.ngPropTitle).toBe('ng-prop-title');
@@ -166,7 +154,7 @@ describe('ngProp*', function() {
         '$compile', 'nodomevents', 'Property bindings for HTML DOM event properties are disallowed');
   }));
 
-  it('should process property bindings at $watch time', function() {
+  it('should process property bindings in pre-linking phase at priority 100', function() {
     module(provideLog);
     module(function($compileProvider) {
       $compileProvider.directive('propLog', function(log, $rootScope) {
@@ -205,11 +193,10 @@ describe('ngProp*', function() {
     });
     inject(function($rootScope, $compile, log) {
       var element = $compile('<div prop-log-high-priority prop-log ng-prop-my_name="name"></div>')($rootScope);
-      log('postCompile=' + element.prop('myName'));
       $rootScope.name = 'angular';
       $rootScope.$apply();
       log('digest=' + element.prop('myName'));
-      expect(log).toEqual('compile=undefined; preLinkP101=undefined; preLinkP0=undefined; postLink=undefined; postCompile=undefined; digest=angular');
+      expect(log).toEqual('compile=undefined; preLinkP101=undefined; preLinkP0=pre101; postLink=pre101; digest=angular');
     });
   });
 
@@ -730,7 +717,7 @@ describe('ngProp*', function() {
         module(function($provide) {
           $provide.decorator('$sce', function($delegate) {
             $delegate.trustAsHtml = function(html) { return new MySafeHtml(html); };
-            $delegate.getTrusted = function(type, mySafeHtml) { return mySafeHtml.val; };
+            $delegate.getTrusted = function(type, mySafeHtml) { return mySafeHtml && mySafeHtml.val; };
             $delegate.valueOf = function(v) { return v instanceof MySafeHtml ? v.val : v; };
             return $delegate;
           });