spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

Angular File Upload directive not updating controller model


I ran into the same problem when trying to access a directive's variable from the controller. In my case I could make myFile available to the controller, but I had to assign it to scope.$parent.$parent.myFile from within the directive. I didn't want to hard code in a depth of ancestry in order to access the variable, so I ended up using a service to share the variable between directive and controller:

.factory('fileService', function() {
    var files = [];
    return files;
})

My directive code changed to use the service instead of attrs.fileModel that was used in the tutorial:

.directive('fileModel', ['$parse',
'fileService', function ($parse, fileService) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.bind('change', function(){
                scope.$apply(function(){
                    if (element[0].files !=
undefined) {
                       
fileService.push(element[0].files[0]);
                        console.log('directive
applying with file');
                    }
                });
            });
        }
    };
}])

Then, after injecting fileService into the controller I could access the file directly from fileService:

$scope.uploadDocs = function() {
    console.log(fileService);
};

Categories : Javascript

Related to : Angular File Upload directive not updating controller model
updating a model in one controller that is watched and located in a different package and used by another controller
I recommend that you wrap the model in a service. Use one of the various providers offered by Angular. https://docs.angularjs.org/guide/providers You can then dependency inject the service anywhere you like in your application.

Categories : Javascript
Angular share data from directive controller to controller
This is my idea, hope it will work. Try to use the controller of directive .directive('someHandler', function () { return { //...previous arguments controller: function ($scope, $element, $attrs) { $scope.YourFunction = function () { //Your code } } }); and then to call $scope.YourFunction() in your controller. ADDITION if you want to

Categories : Javascript
Set initial model value for an angular directive
Oh definitely set the value of the ng-model in the scope. In your directive angular.directive("mySwitchOnOff", [ function() { return { restrict: "C", scope: {}, templateUrl: "template.html", link: function(scope, element, attrs) { // set the value of toggled based on attrs scope.isActive = attrs.section === "extensions"; return scope.toggleV

Categories : Angularjs
Updating Data In Model Not Binds To Controller
So that was pretty simple, but I've spent hours trying to solve it... It's not AngularJs issue rather than JavaScript closure issue, The following solved my problem, app.service('CountriesModel', ['$http', function($http) { $http.get(baseUrl + 'api/countries').success(function(data) { this.countries = data; }.bind(this)); }]);

Categories : Javascript
How to pass the angular's directive's link and controller to it
As you observed, the only way to call your non-standard link function is to do so manually within a "standard" link function. i.e. link: function(scope, element, attrs) { link(scope, element, attrs, MyService1, MyService2); } This is because the link function doesn't get injected like other functions in Angular. Instead, it always gets the same series of arguments (regardless of what you

Categories : Javascript
Recently Add
Busy Indicator while page is loading
parent.document.getElementById and images path
Can not get bootstrap datetime picker to display properly
reading select box jquery issues
DC.JS Pie Chart + Select Deslect from external JavaScript function
Why would I ever need to cancelAnimationFrame()
Angular.ui alert doesn't close
HTML/JS How to position a rectangle relative to 'any' side of the parent canvas element
parse variable to xml
C# Dictionary equivalent in JavaScript
ExtJS Dashboard Panel Fit Panel Vertically
jQuery cross domain ajax call - Interpreted as script but transferred with MIME type text/xml
Reactjs map returns unexpected token }
Working with multiple pages in apache cordova and vs2013
Resize iframe to loaded content
Why 13596*0.1 is different than 13596/10?
AngularJS Validate all forms on application load
javascript open popup without menu/url/titlebar/scrollbar/anything
Can I use Razor syntax inside Javascript included in a ScriptBundle?
How to show a box for comment reply with id
parse name from user input when using jquery serialize
How to parse and load javascript object?
Marionette not navigating to the same url
Adding Google+ Sign in button to website
GRUNT - Install Grunt Packages?
how should I create the path of templateUrl property in Angular ui-router?
Update mysql database with jquery array using ajax
Run the same function on each item in a list / array
Get all ticks values (NVD3)
Button Click Event not Passing input String to MVC Controller Method
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.