angularjs - 来自 blobstorage 的有角度和漂亮的 url

Question

在我将 href url 更改为 angular 标签后，Prettyphoto 停止工作：{{something.uri}}

Javascript：

jQuery(".prettyphoto").prettyPhoto({
    theme: 'pp_default',
    overlay_gallery: false,
    social_tools: false,
    deeplinking: false,
    theme: 'dark_rounded' 
});

$("a[rel^='prettyPhoto']").prettyPhoto();

HTML：

<div ng-show="model.fileList" ng-repeat="fileList in model.fileList">
    <a ng-href="{{fileList.uri}}" class="prettyphoto">
        <img ng-src="{{fileList.uri}}" class="img-thumbnail" width="100" alt="" />
    </a>
</div>

来自 blobstorage 的角度范围：

fileList: [  
   {    
      parentContainerName: documents    
      uri: https://xxxxxx.blob.core.windows.net/documents/20140702.jpg    
      filename: 20140702.jpg    
      fileLengthKilobytes: 293    
   }  
]

Answer 1

app.factory('storageService',
["$http", "$resource", "$q",
  function ($http, $resource, $q) {
      //resource to get summaryRoles
      var resourceStorageManager = $resource('/api/storageManager/:id', { id: '@id' });
      return {
          getFileList: function () {
              var deferred = $q.defer();
              resourceStorageManager.query(, function (data) {
                  deferred.resolve(data);
              }, function (status) {
                  deferred.reject(status);
              }
              );
              return deferred.promise;
          }
      };
}]);



app.controller('startController', ['$scope', '$http', '$timeout', '$upload', 'storageService', 'settings',
function startController($scope, $http, $timeout, $upload, storageService, settings, profileRepository, notificationFactory, $q) {

    $http.defaults.headers.common = { 'RequestVerificationToken': $scope.__RequestVerificationToken };

    $scope.model = {};

    $scope.model.fileList = null;

    $scope.model.roundProgressData = {
        label: 0,
        percentage: 0.0
    };

    $scope.$on("pic_profileone_main", function (event, profileExtInfo1) {
        $scope.changeprofilepicmodel1 = angular.copy(profileExtInfo1);
        refreshServerFileList();
    });

    $scope.$on("pic_profiletwo_main", function (event, profileExtInfo2) {
        $scope.changeprofilepicmodel2 = angular.copy(profileExtInfo2);
        refreshServerFileList2();
    });

    $scope.onFileSelect = function ($files, callernumber, foldername, blobtype) {
        if (callernumber == 1) {
            $scope.blobModel = angular.copy($scope.changeprofilepicmodel1);
            $scope.blobModel.folderName = foldername;
            $scope.blobModel.blobTypeCode = blobtype;
        } else if (callernumber == 2) {
            $scope.blobModel = angular.copy($scope.changeprofilepicmodel2);
            $scope.blobModel.folderName = foldername;
            $scope.blobModel.blobTypeCode = blobtype;
        }
        $scope.selectedFiles = [];
        $scope.model.progress = 0;


        // Assuming there's more than one file being uploaded (we only have one)
        // cancel all the uploads
        if ($scope.upload && $scope.upload.length > 0) {
            for (var i = 0; i < $scope.upload.length; i++) {
                if ($scope.upload[i] != null) {
                    $scope.upload[i].abort();
                }
            }
        }


        $scope.upload = [];
        $scope.uploadResult = [];
        $scope.selectedFiles = $files;

        // Ok, we only want one file to be uploaded
        // let's take the first one and that's all
        var $file = $files[0];

        // Only first element, single file upload
        (function (index) {
            $scope.upload[index] = $upload.upload({
                url: settings.constants.uploadURL,
                headers: { 'myHeaderKey': 'myHeaderVal' },
                method: 'POST',
                data: $scope.blobModel,
                file: $file,
                fileFormDataName: 'myFile'
            }).then(function (response) {
                var look = response;
                $scope.model.progress = 100;

                // you could here set the model progress to 100 (when we reach this point we now that the file has been stored in azure storage)

                $scope.uploadResult.push(response.data);
                $scope.$emit('ClearUploadPics');
                refreshServerFileList();
            }, null, function (evt) {

                // Another option is to stop here upadting the progress when it reaches 90%
                // and update to 100% once the file has been already stored in azure storage
                $scope.model.progress = parseInt(100.0 * evt.loaded / evt.total);

                $scope.model.roundProgressData.label = $scope.model.progress + "%";
                $scope.model.roundProgressData.percentage = ($scope.model.progress / 100);
            });
        })(0);

    };


    function refreshServerFileList() {
        storageService.getFileList().then(function (data) {
            $scope.model.fileList = data;
        }
        );
    }


    function initialize() {
        refreshServerFileList();
    }


    initialize();

    $scope.$on("ClearProgressBar", function (event) {
        $scope.selectedFiles = null;
    });

}]);

我希望这没问题并且更具可读性。