AngularJS Controllers - Scope Properties vs Objects?

Question

Is it considered better practice to use a custom object vs $scope properties in AngularJS controllers?

Or is it better to attach the plateCheck properties to the $scope of the controller?

Object Version

app.controller('PlateCheckCtrl', ['$scope', 'PlateCheckService', function ($scope, PlateCheckService) {
    var plateCheck = {
        plateNumber: '',
        message: '',
        alertClass: '',
        checkPlate: function (plateNumber) {
            var _this = this;

            PlateCheckService.checkPlate(plateNumber).then(function (response) {
                _this.message = response.message;
                _this.alertClass = response.alertClass;
            });
        }
    };

    $scope.plateCheck = plateCheck;
}]);

$scope Version

app.controller('PlateCheckCtrl', ['$scope', 'PlateCheckService', function ($scope, PlateCheckService) {
    $scope.plateNumber = '';
    $scope.message = '';
    $scope.alertClass = '';
    $scope.checkPlate: function (plateNumber) {
        PlateCheckService.checkPlate(plateNumber).then(function (response) {
            $scope.message = response.message;
            $scope.alertClass = response.alertClass;
        });
    };
}]);

I thought I had read somewhere that if you were not referencing your $scope objects/properties with a . you were doing it wrong.

<input type="text" data-ng-model="object.property" /> <-- Right Way
<input type="text" data-ng-model="property" /> <-- Wrong Way

Estyn · Accepted Answer · 2013-11-04 05:25:49Z

3

The object version is preferred.

From the angularjs wiki on prototypical inheritance.

This issue with primitives can be easily avoided by following the "best practice" of >always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the ?>primitive binding issue with ng-switch.

Having a '.' in your models will ensure that prototypal inheritance is in play. So, use rather than .

If you really want/need to use a primitive, there are two workarounds:

Use $parent.parentScopeProperty in the child scope. This will prevent the child scope from >creating its own property. Define a function on the parent scope, and call it from the child, passing the primitive value up to the parent (not always possible)

answered Nov 4, 2013 at 5:25

Estyn

6956 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Controllers - Scope Properties vs Objects?

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