Different Techniques for Defining Functions in an AngularJS Controller Using the controllerAs Method

Question

Different Techniques for Defining Functions in an AngularJS Controller Using the controllerAs Method

When using the 'controller as' approach instead of $scope, I am encountering issues with method calling from HTML. My question is, how many ways are there to declare and call functions using this approach?

First: (For executing something initially)

var vm = this;
vm.dataOne = [];

function funcOne() {
        myService.serviceFunc()
            .then(function(response) {
                vm.dataOne = response.data;
            });
    };
function activate() {
        funcOne();
        }
    activate();

Second: (For initializing a variable based on a function's returned value)

 vm.dataTwo = function() {
        doSomething();
 }

Are there any other ways?
How can we define a function in the controller that will be called from HTML, like
```
ng-click="ctrl.dataTwo()";   
```

javascript angularjs function angularjs-controlleras

Answer 1

Answer №1

The way functions are defined in this context is considered private:

function functionOne() {

}; // This is the function body, no need for a semicolon

These types of functions are known as function declarations and are only accessible within the controller.

In order to call them, you need to assign them to the controller so they become controller variables:

vm.functionOne = functionOne;

An advantage of this method is that you can define functions after calling them, unlike with $scope or $this. These functions are recognized through hoisting and then called.

If you want to initialize a returned value from a function, simply call it like this:

vm.someVariable = someFunction();

For more information, check out these references:

var functionName = function() {} vs function functionName() {}

Private Members in JavaScript

Angular Function Declarations, Function Expressions, and Readable Code

Angular Style Guide

Answer 2

The way functions are defined in this context is considered private:

function functionOne() {

}; // This is the function body, no need for a semicolon

These types of functions are known as function declarations and are only accessible within the controller.

In order to call them, you need to assign them to the controller so they become controller variables:

vm.functionOne = functionOne;

An advantage of this method is that you can define functions after calling them, unlike with $scope or $this. These functions are recognized through hoisting and then called.

If you want to initialize a returned value from a function, simply call it like this:

vm.someVariable = someFunction();

For more information, check out these references:

var functionName = function() {} vs function functionName() {}

Private Members in JavaScript

Angular Function Declarations, Function Expressions, and Readable Code

Angular Style Guide

Answer 3

Answer №2

Implementing ng-controller="cntrl as vm" syntax:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .controller('MyCntrl', function($scope) {
       var vm = this;
       vm.name = 'Custom Directive';
   });
</script>
<body>

<div ng-app="MyApp" ng-controller="MyCntrl as vm">
  {{vm.name}}
</div>

</body>
</html>

Using controllerAs in a custom directive:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .directive('customDir', function() {
       return {
           restrict: 'EA',
           template: '<div>{{vm.name}}</div>',
           controller: function(){
               var vm = this;
               vm.name = 'Custom Directive';
           },
           controllerAs: 'vm'
       } 
   });
</script>
<body>

<div ng-app="MyApp">
  <div custom-dir></div>
</div>

</body>
</html>

Calling a function with "controller as" syntax:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .controller('MyCntrl', function($scope) {
       var vm = this;
       vm.name = 'Custom Directive';

       vm.someFunction = function() {
         vm.name = 'Button is Clicked!!!';
       };
   });
</script>
<body>

<div ng-app="MyApp" ng-controller="MyCntrl as vm">
 {{vm.name}}
 <input type='button' ng-click="vm.someFunction()" value="Click" /> 
</div>

</body>
</html>

Answer 4

Implementing ng-controller="cntrl as vm" syntax:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .controller('MyCntrl', function($scope) {
       var vm = this;
       vm.name = 'Custom Directive';
   });
</script>
<body>

<div ng-app="MyApp" ng-controller="MyCntrl as vm">
  {{vm.name}}
</div>

</body>
</html>

Using controllerAs in a custom directive:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .directive('customDir', function() {
       return {
           restrict: 'EA',
           template: '<div>{{vm.name}}</div>',
           controller: function(){
               var vm = this;
               vm.name = 'Custom Directive';
           },
           controllerAs: 'vm'
       } 
   });
</script>
<body>

<div ng-app="MyApp">
  <div custom-dir></div>
</div>

</body>
</html>

Calling a function with "controller as" syntax:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .controller('MyCntrl', function($scope) {
       var vm = this;
       vm.name = 'Custom Directive';

       vm.someFunction = function() {
         vm.name = 'Button is Clicked!!!';
       };
   });
</script>
<body>

<div ng-app="MyApp" ng-controller="MyCntrl as vm">
 {{vm.name}}
 <input type='button' ng-click="vm.someFunction()" value="Click" /> 
</div>

</body>
</html>

Answer 5

Answer №3

Another approach is to utilize a function as constructor and enhance its capabilities using the prototype

function Controller($window) {
  this.$window = $window;
}

Controller.inject = ['$window']

Controller.prototype.click = function() {
  this.$window.alert('clicked')
}

angular.module('app', [])
.controller('controller', Controller)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='controller as ctrl'>
  <button ng-click='ctrl.click()'>Click me!</button>  
</div>

Answer 6

Another approach is to utilize a function as constructor and enhance its capabilities using the prototype

function Controller($window) {
  this.$window = $window;
}

Controller.inject = ['$window']

Controller.prototype.click = function() {
  this.$window.alert('clicked')
}

angular.module('app', [])
.controller('controller', Controller)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='controller as ctrl'>
  <button ng-click='ctrl.click()'>Click me!</button>  
</div>

Different Techniques for Defining Functions in an AngularJS Controller Using the controllerAs Method

Answer №1

Answer №2

Implementing ng-controller="cntrl as vm" syntax:

Using controllerAs in a custom directive:

Calling a function with "controller as" syntax:

Answer №3

Similar questions

Choose a radio button from a React Native FlatList

Adjust the CSS of a nested div within the currently selected div upon page load

The webpage containing the authRequired meta briefly flashes on the screen, even if there are no active login sessions on Firebase

Having issues with clicking on a row in the table while using AJAX functionality

Looking for a way to make this HTML tab appear using ng-show and an external variable in AngularJS - seeking guidance as a beginner!

Next.js appending [object%20Object] to the URL's endpoint

Request Timeout: The server took too long to respond and the request timed out. Please try again later

How to detect internet connection in any screen using React Native?

What is the best way to ensure that circles only touch each other by their edges?

What are the key distinctions between an arrow function, a class, and a traditional function?

Dynamic connections with Meteor and AngularJS

Key factors to keep in mind when comparing JavaScript dates: months

What are the distinctions between manually and programmatically changing URLs in Angular 6?

Having trouble with shipit.js deployment: Error encountered - git checkout undefined

The sequence for conducting operations within a function in JavaScript (Vue.js)

Choose options with selectize.js including option separators

Create a dropdown menu using a PDO query to populate the selectable options

Utilizing the jQuery slideToggle method on the specified target element

Eliminate all the zeros from the date string

What is the reason for ng-submit not being prevented by a mandatory select field?