角度路由和控制器无法正常工作

时间:2017-06-09 00:31:26

标签: angularjs controller routing

Angular的新手并不能为我的生活弄清楚为什么路由不适合我。它工作了一段时间,然后由于某种原因迅速停止。

此外,它似乎也不是我的控制器正在工作,因为当我将表单HTML复制到index.html文件并尝试上传文件时,它似乎没有运行uploadFile()函数

这是我的代码:

JS / app.js

angular.module('packager', ['ngRoute', 'MainCtrl', 'appRoutes', 'ngFileUpload'])

JS / appRoutes.js

 angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/', {
        templateUrl: './views/home.html',
        controller: 'MainController'
    })
    .when('/package', {
        templateUrl: './views/package.html',
        controller: 'MainController'
    });

}]);

控制器/ MainCtrl.js

 angular.module('MainCtrl', []).controller('MainController', [$scope, $location, Upload, function($scope, $location, Upload) {
    $scope.upload = {};
    $scope.uploads = [];

    $scope.uploadFile = function() {
        Upload.upload({
        url: '/upload'
        method: 'post'
        data: $scope.upload
    }).then(function (response) {
        console.log($scope.upload)

        $scope.id = $scope.upload.id
        $scope.uploads.push(response.data);
        $scope.upload = {};

        $location.path('/package')
    }
}]);

的index.html

<html>
<head>
    <base href="/">
    <title>Packager</title>

    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="libs/ng-file-upload/ng-file-upload.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers/MainCtrl.js"></script>
    <script src="js/appRoutes.js"></script>
</head>

<body ng-app="packager" ng-controller="MainController">
    <div class="container">
        <div ng-view> </div>
    </div>
</body>
</html>

views / home.html(两种形式之一)

<form ng-submit="uploadFile()">
    <input type="file" name="file" id="file" ngf-select required ng-model="upload.file"> <br>
    <input type="submit" value="Upload">
</form>

1 个答案:

答案 0 :(得分:0)

修正了它。有两种语法错误:

忘记上传对象中的逗号

[['2017-06-03 23:02:49', 712.32, 50.01],
 ['2017-06-03 23:03:49', 501.21, 521.79],
 ['2017-06-03 23:01:49', 0, 100.01]]

忘了把注射剂串起来:

Upload.upload({ url: '/upload', method: 'post', data: $scope.upload })

相关问题