Call a controller's function from component

Question

I'm trying to call a controller's function from a component. Here are my files:

controller.js:

$scope.dataTableDevices = {
    title: 'title',
    color: {'background' : 'rgb(31, 119, 180)'},
    items: [0, 1, 2]
};
$scope.hacerClick = function(){
    alert("it works");
}

view.html:

<device-categories data="dataTableDevices"></device-categories>

deviceCategories.js:

function deviceCategoriesController() {
}

widgetsFactory.component('deviceCategories', {
    templateUrl: 'app/common/js/components/deviceCategories/deviceCategories.html',
    controller: deviceCategoriesController,
    bindings: {
        data: '='
    }
});

deviceCategories.html:

<md-button ng-click="howToCallhacerClick()">
    Click
</md-button>

I have not been able to solve the problem. Components behave a little bit different than directives, right? — Erick Ramírez
– Erick Ramírez, Commented Sep 23, 2016 at 22:37

Bhavik Dodia · Accepted Answer · 2017-03-26 23:15:25Z

Components are like directives having an isolated scope.

If you wish to call a function which is in parent scope/ controllers scope then do the following

Consider the following method in your controller:

angular.module('MyApp').controller('AppController', function ($scope) {
    $scope.validateInputByUser = function (obj) {
        if (obj['note'].length > 255) {
            return false;
            }
            return true;
        };
});

Create a component

angular.module('MyApp')
.component('notes', { 
                        templateUrl: "/Templates/Notes.html", 
                        controllerAs: 'model', 
                        controller: NotesController, 
                        bindings: { 
                            note: '=' 
}});

Create a controller with name 'NotesController' with $scope injection, as component is the child of controller, controllers 'scope' is accessible as $parent in the component.
```
function NotesController ($scope) {
    // binding parent method to scope of current component
    $scope.validateInputByUser = $scope.$parent.validateInputByUser;
};
```
Now, you can implement and access the controllers method by the following:

Html on notes template (/Templates/Notes.html) looks like
```
<textarea type="text" ng-model="model.note" ng-blur="validateInputByUser(model)"/>
```
Html on the component implementation page looks like
```
<notes note="obj.notes"/>
```

Now, every time user enters text and leaves the text area the controller's function 'validateInputByUser' will be called.

Hope this helps! Cheers...

Justin Kruse · Accepted Answer · 2017-04-26 17:49:09Z

You need to pass the function to your component from your controller using the '&' binding which is used for callbacks to component events. So You'll need to do something like this:

component

.component('deviceCategories',{
    template: `<div>
                   <md-button ng-click="$ctrl.hacerClickFn()">Click Me!
                   </md-button>
               </div>,
    bindings: {
        data:'=', //assuming you need two way binding
        hacerFunc:'&'
     },
     controller: [function(){
         var ctrl = this;

          ctrl.hacerClickFn = function() {
              ctrl.hacerFunc();
          }
     }]
 });

View

<device-categories data="data" hacer-func="hacerClick()"</device-categories>

AngularJS Component Documentation

Great explanation of differences between components and directives

Collectives™ on Stack Overflow

Call a controller's function from component

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related