I have gone through similar questions and their answers, but I am still struggling to understand this. Any assistance on this would be greatly appreciated.
The code snippet below functions correctly. However, if I substitute $scope with this before the bindTest and clickTest functions (lines 3 and 6), it fails to work. Can someone explain why this is happening? Based on my understanding, using $scope should work in this scenario.
Conversely, replacing $scope with this before offOrOn (line 8) results in it not working.
angular.module('myTestApp', [])
.controller('MyTestController', function($scope) {
this.bindTest = function() {
console.log("bindTest");
};
this.clickTest = function() {
console.log("clickTest");
$scope.offOrOn = 'on';
};
});button {
height:25px;
width:25px;
}
.on {
background-color:red;
}<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myTestApp" ng-controller="MyTestController as tester">
<p ng-bind="tester.bindTest()"></p>
<button ng-class="offOrOn" ng-click="tester.clickTest()"></button>
</div>
</body>Additionally, I attempted to create a fiddle, but encountered issues where it wouldn't load the module according to the Chrome dev console. I'm curious about what could be causing this problem. Nevertheless, it's beneficial that stackoverflow now offers a similar functioning alternative!