$scope vs instance variables and methods in controller

Question

I am rewriting my AngularJS application using TypeScript. In my application I have used $scope to define variables and methods:

defectResource.defectByDefectId($scope.defectid).then(function (data) {
   $scope.defect = data;
});

$scope.postDefect = function () {
   defectResource.postDefect($scope.defect).then(function () {
      $location.path('defects/' + $stateParams.itemid);
   });
};

I can rewrite my controller something like this:

interface IDefectDetailModel {
}

class DefectDetailController implements IDefectDetailModel {
    static $inject = ['$scope', '$stateParams', '$location', 'defectResource', 'entityProvider'];

    constructor($scope: any, $stateParams: any, $location: any, defectResource: any, entityProvider: any) {
       defectResource.defectByDefectId($scope.defectid).then(function  (data) {
          $scope.defect = data;
       });

      $scope.postDefect = function () {
        defectResource.postDefect($scope.defect).then(function () {
           $location.path('defects/' + $stateParams.itemid);
        });
      };
    }
}

But if I understood correctly it is not good way. I need to create Interface and TypeScript class which will implement this interface. All my variables must be class variables (so $scope.defectid must be this.defectid) and all my $scope methods must be class methods (this.postDefect()).

Do I understood correctly? If I am using AngularJS with TypeScript the best way is not use $scope variables and methods and use only instance variables and methods (using this) ?

basarat · Accepted Answer · 2015-12-06 23:00:30Z

2

If I am using AngularJS with TypeScript the best way is not use $scope variables and methods and use only instance variables and methods (using this) ?

+100.

Key reason being that scope variables are susceptible to become disconnected due to angular's scope inheritance mechanism. Even without TypeScript it is recommended not to use scope varaibles and this is why the controller as syntax was created.

More on Angular controllers in typescript: https://www.youtube.com/watch?v=WdtVn_8K17E

answered Dec 6, 2015 at 23:00

basarat

278k61 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

$scope vs instance variables and methods in controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related