scope.f1上传文件时未定义错误

Question

我对AngularJS的编码很新。我已经应用了我通过互联网找到的AngularJS上传文件教程。当我尝试上传文件时，我收到错误$scope.f1未定义错误。 scopeerror我尝试过所有内容，但遗憾的是我无法解决错误。

你能帮我解决这个问题吗？

Controller.js

＆＃13;

＆＃13;

Controller.js

angular.module("ciciannemApp.controllers",[]).
controller("MainController", function ($scope, ProductService) {
    $scope.message = "Main Controller";

    ProductService.GetProductsFromDb().then(function (d) {
        $scope.listProducts = d.data.list;
    })

    $scope.DeleteProduct = function (id, index) {
        $scope.listProducts.splice(index, 1);
        ProductService.DeleteProduct(id);
    }
}).
controller("AddProductController", function ($scope, ProductService) {
        $scope.message = "Add Product Details";
        $scope.AddProduct = function ()
        {
            ProductService.AddProduct($scope.product);
        }
}).
controller("EditProductController", function ($scope, ProductService, $routeParams) {
        $scope.message = "Edit Product Details";

        var id = $routeParams.id;
        ProductService.GetProductById(id).then(function (d) {
            $scope.product = d.data.product;
        })

        $scope.UpdateProduct = function () {
            ProductService.UpdateProduct($scope.product);
        }
    }).
controller("AddImageController", ["$scope", "$q", "ProductService", function ($scope, $q,  ProductService) {
       
    //Variables
    $scope.Message = "";
    $scope.FileInvalidMessage;
    $scope.SelectedFileForUpload = null;
    $scope.Description = "";
    $scope.IsFormSubmitted = false;
    $scope.IsFileValid = false;
    $scope.IsFormValid = false;
    var SelectFileForUpload = null;

    //Form Validation
    $scope.$watch("f1.$valid", function (isValid) {
        $scope.IsFormValid = isValid;
    });
    //File Validation
    $scope.ChechFileValid = function (file) {
        var isValid = false;
        if ($scope.SelectedFileForUpload != null) {
            if ((file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') && file.size <= 512 * 1024) {
                $scope.FileInvalidMessage = "";
                isValid = true;
            }
            else {
                $scope.FileInvalidMessage = "Selected file is Invalid.(only file type png, jpeg and gif and 512 kb size allowed )";
            }
        }
        else {
            $scope.FileInvalidMessage = "Image Required!";
        }
        if (isValid) {
            $scope.IsFileValid = true;
            $scope.IsFormValid = true;
        }
    };
    //File Select 
    $scope.selectFileforUpload = function (file) {
        $scope.SelectedFileForUpload = file[0];
    }
    //Save File
    $scope.AddImage = function () {
        $scope.IsFormSubmitted = true;
        $scope.Message = "";
        $scope.ChechFileValid($scope.SelectedFileForUpload);
        if ($scope.IsFormValid && $scope.IsFileValid) {
            ProductService.AddImage($scope.SelectedFileForUpload, $scope.Description).then(function (d) {
                alert(d.Message);
                ClearForm();
            }, function (e) {
                alert(e);
      
            });
        }
        else {
            $scope.Message = "All Fields are required";
        }
    };
    //Clear Form
    function ClearForm() {
        $scope.Description = "";
        alert($scope.Description);
        angular.forEach(angular.element("input[type='file']"), function (inputElem) {
            angular.element(inputElem).val(null);
        });
        $scope.f1.$setPristine();
        $scope.IsFormSubmitted = false;
    }
}]).
factory("ProductService", ["$http", "$q", function ($http, $q) {
    var fac = {};
    fac.GetProductsFromDb = function ()
    {
        return $http.get("/Product/GetProducts");
    }
    fac.GetProductById = function (id)
    {
        return $http.get("/Product/GetProductById", { params: { id: id } });
    }
    fac.AddProduct = function (product)
    {
        $http.post("/Product/AddProduct", product).then(function (response) {
            var response = "Ürün Eklendi"; alert(response);
        }, function (response) {
            var response = "Hata Oluştu"; alert(response);
        });
    }
    fac.UpdateProduct = function (product) {
        $http.post("/Product/UpdateProduct", product).then(function (response) {
            var response = "Ürün Güncellendi"; alert(response);
        }, function (response) {
            var response = "Hata Oluştu"; alert(response);
        })
    }
    fac.DeleteProduct = function (id) {
        $http.post("/Product/DeleteProduct", { id: id }).then(function (response) {
            var response = "Ürün Silindi"; alert(response);
        }, function (response) {
            var response = "Hata Oluştu"; alert(response);
        })
    }
    fac.AddImage = function (file, description) {
        
        var formData = new FormData();
        formData.append('file', file);
        formData.append('description', description);
        
        var defer = $q.defer();
        $http.post("/Product/AddImage", formData, {
            withCredentials: true,
            headers: { 'Content-Type': undefined },
            transformRequest: angular.identity
        })
                        .then(function (d) {
                            defer.resolve(d);
        }, function () {
            defer.reject("File Upload Failed!");
        });

        return defer.promise;
    }
    return fac;
}])

App.js

var app = angular.module("ciciannemApp", ["ciciannemApp.controllers", "ngRoute"]);

app.config(["$routeProvider", function ($routeProvider) {
    $routeProvider.
    when("/", { templateUrl: "/Partials/ProductList.html", controller: "MainController" }).
    when("/AddProduct", { templateUrl: "/Partials/AddProduct.html", controller: "AddProductController" }).
    when("/EditProduct/:id", { templateUrl: "/Partials/EditProduct.html", controller: "EditProductController" }).
    when("/AddImage/", { templateUrl: "/Partials/AddImage.html", controller: "AddImageController" }).
    otherwise({redirectTo: "/"})

}])

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title> Main Controller </title>
	<meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>    
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular-route.min.js"></script>  
    <script src="Scripts/controllers.js"></script>
    <script src="Scripts/app.js"></script>

</head>
<body ng-app="ciciannemApp">
    <div ng-view>
    </div>
</body>
</html>

＆＃13;

＆＃13;

＆＃13; 强调文字 提前致谢 此致