AngularJS Controller Patterns and is $scope the same as the keyword this?

Question

What am I missing for my AngularJS Not Working code? Currently, I'm trying to refactor the AngularJS Working code. From my understanding, the this keyword is equivalent to $scope. Also, for my AngularJS Not Working code I'm trying to understand why it is not working. I've seen working code use this pattern. I'm trying to get more context.

AngularJS Working

<script>
    var app = angular.module("app", []);
    app.controller("ClassController", function ($scope) {
        $scope.classBold = '';
        $scope.classUnderline = '';

        $scope.MakeBold = function () {
            if ($scope.classBold.length == 0) {
                $scope.classBold = 'bold';
            } else {
                $scope.classBold = '';
            }
        };

        $scope.MakeUnderline = function () {
            if ($scope.classUnderline.length == 0) {
                $scope.classUnderline = 'underline';
            } else {
                $scope.classUnderline = '';
            }
        };
    });

</script>

AngularJS Not Working

<script>
(function(){

angular
.module('classApp')
.controller("ClassController", ClassController);

function ClassController($scope){
        var model = this;
        model.classBold = '';
        model.classUnderline = '';

        model.MakeBold = function () {
            if (model.classBold.length == 0) {
                model.classBold = 'bold';
            } else {
                model.classBold = '';
            }
        };

        model.MakeUnderline = function () {
            if (model.classUnderline.length == 0) {
                model.classUnderline = 'underline';
            } else {
                model.classUnderline = '';
            }
        };
    }
    })();

</script>

HTML

    <!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>

    </head>
<body>

<div ng-app="classApp" ng-controller="ClassController">
    <p ng-class="SpaceDelimitedClass">Write the class name to apply</p>
    <input type="text" ng-model="SpaceDelimitedClass" placeholder="bold italic overline" />

    <hr />
    <p ng-class="{bold : makeBold, italic : makeItalic, overline : makeOverline}">Apply below style</p>
    <label><input type="checkbox" ng-model="makeBold" />Bold</label>
    <label><input type="checkbox" ng-model="makeItalic" />Italic</label>
    <label><input type="checkbox" ng-model="makeOverline" />Overline</label>

    <hr />
    <p ng-class="[classBold, classUnderline]">Apply Below Class</p>
    <button ng-click="MakeBold()">Make Bold</button>
    <button ng-click="MakeUnderline()">Make Underline</button>

    <hr />
    <p ng-class="[MyStyle, {overline : setIt}]">Write or Apply CSS Class</p>
    <input type="text" ng-model="MyStyle" placeholder="bold or italic or oblic" />
    <label><input type="checkbox" ng-model="setIt" />Overline</label>
</div>
</body>
</html>

CSS

<style>
    .bold {
        font-weight:bold;
    }
    .italic {
        font-style:italic;
    }
    .oblic{
        font-style:oblique;
    }
    .underline{
       text-decoration:underline;
    }
    .overline{
        text-decoration:overline;
    }
</style>

Possible duplicate of ['this' vs $scope in AngularJS controllers](https://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers) — P.S., Sep 21 '17 at 22:26

score 1 · Accepted Answer · answered Sep 22 '17 at 00:38

Controller this and $scope are not the same. In view variable declared using controller this (this fields) are available as fields of an object. The object name is set in the controllerAs setting (it is set e.g. in the routes config). E.g. if the controllerAs was set to '$ctrl' you can access in the view the variable classBold as $ctrl.classBold

AngularJS Controller Patterns and is $scope the same as the keyword this?

1 Answers1