look for variable in angularjs whether it is empty or not

Question

I want to call a function if the variable in scope exist. I am using:

$scope.$watch('product_files', function () {
   $scope.uploadNewProduct($scope.product_files);
});
$scope.uploadNewProduct=function(files){
console.log("hello");
  if(files && files.length){
    console.log("hello");
  }
}

and $scope.product_files is a file with any extension which I am uploading using input type=file but everytime it's showing undefined.

I have never used $scope.watch and don't know whether I am doing right or not. please any idea.

$scope.watch checks if variables on value change and when value changes they gets called. — Vijay Raheja, Jul 05 '18 at 06:52
in my case i have not selected any file still its printing first console means calling the function — Adesh Kumar, Jul 05 '18 at 06:54
I am using ng-model="product_files". function is called when controller is loaded and i want it to be called if there is some value in scope.product_files — Adesh Kumar, Jul 05 '18 at 07:00

score 4 · Accepted Answer · answered Jul 05 '18 at 07:13

There is no need to use $watch, instead use the ng-change directive with the file selector:

<input type="file" select-ng-files ng-model="product_files"
       ng-change="upLoadNewProduct(product_files)" />

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);
      })
    }
  }
});

$scope.uploadNewProduct=function(files) {
  if(files && files.length){
    console.log("hello");
  }
}

For more information, see ng-model for <input type="file"/> (with directive DEMO).

score 1 · Answer 2 · answered Jul 05 '18 at 06:59

you misunderstood the concept of $watch, I'll explain:

First and foremost, AngularJS defines a concept of a so-called digest cycle. This cycle can be considered as a loop, during which AngularJS checks if there are any changes to all the variables watched by all the $scopes. So if you have $scope.myVar defined in your controller and this variable was marked for being watched, then you are implicitly telling AngularJS to monitor the changes on myVar in each iteration of the loop.

A natural follow-up question would be: Is everything attached to $scope being watched? Fortunately, no. If you would watch for changes to every object in your $scope, then quickly a digest loop would take ages to evaluate and you would quickly run into performance issues. That is why the AngularJS team gave us two ways of declaring some $scope variable as being watched (read below).

$watch helps to listen for $scope changes

There are two ways of declaring a $scope variable as being watched

Meaning $watch won't tell you if the variable is empty but rather, if the variable changed.

for example:

unction MyController($scope) {

    $scope.myVar = 1;

    $scope.$watch('myVar', function() {
        alert('hey, myVar has changed!');
    });

    $scope.buttonClicked = function() {
        $scope.myVar = 2; // This will trigger $watch expression to kick in
    };
}

if you want to check if the variable exists, create a function:

$scope.isNullOrEmptyOrUndefined = function (value) {
    return !value;
}

and then check it like this (for example):

if($scope.isNullOrEmptyOrUndefined(product_files) {
 //your logic
}

you are right. but when we load the controller th alert in first case works fine. but on changing the scope variable again means after selecting the file its not alerting means watch is not working — Adesh Kumar, Jul 05 '18 at 07:07

look for variable in angularjs whether it is empty or not

2 Answers2