Fix cl-transformation support of ng-if (#105)

cloudinary · Mar 12, 2019 · 3dd6b62 · 3dd6b62
1 parent 452747f
commit 3dd6b62
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/js/angular.cloudinary.js b/js/angular.cloudinary.js
@@ -90,7 +90,11 @@
       transclude : false,
       require: '^clImage',
       link : function (scope, element, attrs, clImageCtrl) {
-        clImageCtrl.addTransformation(toCloudinaryAttributes(attrs, /^[^$]/));
+        var transformation = toCloudinaryAttributes(attrs, /^[^$]/);
+        clImageCtrl.addTransformation(transformation);
+        scope.$on('$destroy', function (event) {
+          clImageCtrl.removeTransformation(transformation);
+        })
       }
     }
   }]);
@@ -100,6 +104,15 @@
       this.addTransformation = function(ts) {
         $scope.transformations = $scope.transformations || [];
         $scope.transformations.push(ts);
+        $scope.transformations = $scope.transformations.slice()
+      };
+      this.removeTransformation = function (ts) {
+        $scope.transformations = $scope.transformations || [];
+        var index = $scope.transformations.indexOf(ts);
+        if (index >= 0) {
+          $scope.transformations.splice(index, 1);
+          $scope.transformations = $scope.transformations.slice()
+        }
       }
     };
     Controller.$inject = ['$scope'];
@@ -120,6 +133,12 @@
           options.transformation = scope.transformations;
         }
 
+        scope.$watch('transformations', function(value){
+          if (!value) return;
+          options.transformation = value;
+          loadImage();
+        });
+
         // store public id and load image
         attrs.$observe('publicId', function(value){
           if (!value) return;

diff --git a/spec/cloudinary_spec.js b/spec/cloudinary_spec.js
@@ -188,6 +188,38 @@ describe("cloudinary", function () {
       })
     })
   });
+  describe('child transformation with ng-if', function () {
+    it('should include transformation with ng-if="true"', function () {
+      var template = '<div><cl-image public_id="foobar">' +
+          '<cl-transformation ng-if="true" gravity="north" effect="sepia" radius="20" />' +
+          '</cl-image></div>';
+      var element = $compile(template)($rootScope);
+      $rootScope.$digest();
+      expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/e_sepia,g_north,r_20/foobar\"");
+    });
+    it('should exclude transformation with ng-if="false"', function () {
+      var template = '<div><cl-image public_id="foobar">' +
+          '<cl-transformation ng-if="false" gravity="north" effect="sepia" radius="20" />' +
+          '</cl-image></div>';
+      var element = $compile(template)($rootScope);
+      $rootScope.$digest();
+      expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/foobar\"");
+    });
+    it('should update transformation on ng-if condition changed', function () {
+      var template = '<div><cl-image public_id="foobar">' +
+          '<cl-transformation ng-if="ngIfVisible" gravity="north" effect="sepia" radius="20" />' +
+          '</cl-image></div>';
+      var element = $compile(template)($rootScope);
+
+      $rootScope.ngIfVisible = true;
+      $rootScope.$digest();
+      expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/e_sepia,g_north,r_20/foobar\"");
+
+      $rootScope.ngIfVisible = false;
+      $rootScope.$digest();
+      expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/foobar\"");
+    });
+  });
   describe("clSrc", function () {
     it('populates the src attribute with the cloudinary URL for the public ID', function () {
       var element = $compile("<div><img cl-src='foobar'/></div>")($rootScope);