Cfrgtkky

In AngularJS, when something change in parent, the child binds the new change,
automatically. However this awesome process is being done only in the HTML file,
but not in the JS file.

Sometimes, if not always, we would like to acheive the same thing also in JS files.

Directive is getting initialized via the JS file, like this:

// statusBadge.js directive

app.directive("statusBadge", ($rootScope, ArrayManipulation, Http, Cast, Modules, Toast) => {

  return {

    templateUrl: "/shared/status-badge/status-badge.html",

    scope: {

      bindModel: "=ngModel",

      statusChangingRequiredModules: "=",

      statusOptionsToBeHide: "<",

      onChange: "=",

      resource: "@"

    },

    link: function($scope, element, attrs) {



      if ($scope.bindModel==$rootScope._id) {

        $scope.active = true;

      }



    }

  }

});



// statusBadge.html directive 

<span ng-show="active">

  Active

</span>



// parent.js 

$scope._id = "123";



// app.js 

$rootScope._id = "123";



// parent.html 

<status-badge ng-model="_id"></status-badge>

Now when data is synchronomous the "Active" will be displayed, since its getting
provided by initialization.

However, when working async - like receiving the data from the remote server,
I have to include ng if, like that:

// app.js 

setTimeout(function () {

  $scope._id = "123";

}, 10);



// parent.html

// notice the ng-if

<status-badge ng-model="_id" ng-if="_id"></status-badge>

If I dont provide with the above ng-if, the directive configuation will be inited
without the actual data.

Front end, later, will have the data, since as I mentined in the begining - AngularJS
binds two way data, but only to HTML files.

Now I know I can put a watcher in the JS file, like this :

// statusBadge.js directive

app.directive("statusBadge", ($rootScope, ArrayManipulation, Http, Cast, Modules, Toast) => {

  return {

    templateUrl: "/shared/status-badge/status-badge.html",

    scope: {

      bindModel: "=ngModel",

      statusChangingRequiredModules: "=",

      statusOptionsToBeHide: "<",

      onChange: "=",

      resource: "@"

    },

    link: function($scope, element, attrs) {



      $scope.$watch("bindModel", function() {

        if ($scope.bindModel==$rootScope._id) {

          $scope.active = true;

        }

      }, true);



    }

  }

});

However this can be tidy to so everytime, and sometimes the list of the watchers is long:

// almost all of them are two way data binding, but resource and statusOptionsToBeHide

scope: {

  bindModel: "=ngModel",

  statusChangingRequiredModules: "=",

  statusOptionsToBeHide: "<",

  onChange: "=",

  resource: "@"

}

So what is the solution for this, or the best practice or just the preferred way of working?

Should I add the ng-if in each time its changed, and every time make it false - which can cause a bad UI - since the whole list, or component is going to be refreshed on each change - looks awful.

Should I put tons of watchers?

OR that is there any good solution for this?

Note that I have seen this question in Stack:
$watch'ing for data changes in an Angular directive

However they tell there that it should be a watcher in there, but I need a "multiple" watcher.