How to show scope variable value in template in angularjs

Question

I want to show update variable in my template.While selecting a file,it's change event catching function inside I'm changing my scope variable.But it's not showing in my template.

Here is my html code

<div ng-app="app" ng-controller="ActivationLocusRegistrationCtrl as vm"   >
    <div class="row">
        <div class="columns small-7 medium-5 large-5">
            <label for="taxDoc" ">
                Tax Certification Form<small style="color:red;"> *</small> {{taxDocErrorMessage}}
            </label>
        </div>
        <div class="columns small-5 medium-7 large-7">
            <input type="file" name="taxDoc" id="taxDoc"
                    file-model="myFile"
                   onchange="angular.element(this).scope().fileUploadTaxDoc(this)"
                   required />
            <span class="form-error" data-ng-show="taxDocErrorMessagel">{{errorMessages[0]}}</span>
        </div>
    </div>
</div>

here is my js code

(function () {
    'use strict';
    angular
        .module('app')
        .controller('ActivationLocusRegistrationCtrl', ['$scope' , ActivationLocusRegistrationCtrl]);
    function ActivationLocusRegistrationCtrl($scope) {
       $scope.taxDocErrorMessage = false;

       $scope.fileUploadTaxDoc = function (a) {
            $scope.taxDocErrorMessage = true;
       };    
    }
}());

I checked this while debugging, it's show true. please tell me what is the mistake in this code. thanks

score 1 · Accepted Answer · answered Oct 15 '19 at 13:18

Avoid using onchange event handlers with the AngularJS framework. AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

ERRONEOUS

<input type="file" name="taxDoc" id="taxDoc"
       file-model="myFile"
       onchange="angular.element(this).scope().fileUploadTaxDoc(this)"
       required />

Use a custom directive:

<input type="file" name="taxDoc" id="taxDoc"
       select-ng-files
       ng-model="myFiles"
       ng-change="fileUploadTaxDoc()"
       required />

JS

app.directive("selectNgFiles", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

For more information, see

ng-model for `<input type="file"/>` (with directive DEMO)

thanks a lot. it's working properly – DevAra Oct 16 '19 at 16:48 — DevAra, Oct 16 '19 at 16:48

How to show scope variable value in template in angularjs

1 Answers1