2

我正在尝试使用 ngflow 将图像上传功能构建到我的 angularJS 应用程序中。我已经设法让它工作，以便我可以将图像上传到我选择的文件夹（使用 php）。

我现在想要做的是能够引用这些图像，以便我可以使用我正在创建的 ng-src 将它们包含在用户的配置文件中。这些配置文件是使用自定义指令创建的。我相信我需要做的是在控制器范围内设置一个等于流范围唯一标识符变量的变量，然后我就可以随意引用图像路径。但是，当我尝试这样做时，我得到了未定义的错误——这表明我错误地将流范围注入到我的控制器中。我的代码如下。如果您有任何想法，那就太好了。

模块

//Module - Inject flow
var App = angular.module('App',['ngRoute', 'flow']);

//Routing - Create views and set flow default settings
App.config(['$routeProvider', 'flowFactoryProvider', function ($routeProvider, flowFactoryProvider) {

$routeProvider 

.when('/register-aboutme', {
    templateUrl: 'pages/user-aboutme.html',
    controller: 'userController'
})

flowFactoryProvider.defaults = {
target: './upload.php',
permanentErrors: [404, 500, 501],
maxChunkRetries: 1,
chunkRetryInterval: 5000,
simultaneousUploads: 4,
singleFile: true
};

flowFactoryProvider.on('catchAll', function (event) {
console.log('catchAll', arguments);
});
}]);

控制器

App.controller('userController', ['$scope', '$location', '$log', 'userprof', function($scope, $location, $log, userprof) {

//Attempt to create new property of object equal to recent photo upload
$scope.userprof.photopath = $flow.files[0].uniqueIdentifier;

}]);

//DIRECTIVES
//Creates a directive that shows the current status of the user profile as they register

App.directive("userProfile", function() {
return {
    restrict: 'EC',
    templateUrl: 'directives/userprofile.html',
    replace: true,
    scope: {
        userData: "="
   }
}
});

关于我 HTML（用户上传照片的地方）

<div flow-init class="container">
<form ng-submit="submit()">
<div class="form-group">
    <label for="userphoto">Photo</label>
        <div flow-files-submitted="$flow.upload()" flow-file-success="$file.msg = $message">
            <p class="btn btn-default" type="file" flow-btn>Upload Photo</p>
            <table>
                <tr ng-repeat="file in $flow.files">
                    <td><p>{{file.name}}</p></td>
                    <td><p>{{file.isComplete()}}</p></td>
                    <td><p>{{file.uniqueIdentifier}}</p></td>
                </tr>
            </table>
            <img flow-img="$flow.files[0]" class="userphotoupload"/>
        </div>

</div>


用户配置文件指令

<div class="container">
<div class="panel panel-default">                       
<div class="panel-body">
    <div class="row col-md-12">
        <p><img class="userphoto" ng-src="{{ userData.photopath }}">
    </div>
</div>
</div>
</div>

提前致谢！！

4

0 回答 0