AngularJS: Exeucting function from controller in a directive

Question

I'm very new to AngularJS and I try to do the following:

Bind an scroll event on an element by using a custom directive. Here's the code:

First of all, my controller:

var officeUIApplication = angular.module('OfficeUI.Ribbon.Module', [])
.controller('OfficeUI', ['$scope', '$http', function($scope, $http) {
    var application = this;
    $scope.customAlert = function() {
        console.log('This ia scrolling demo.');
    }
}])

You'll notice, that here I have function called 'CustomAlert'. I don't know why I'm binding it to $scope, I've only found this kind of information on the next. Can I remove the scope or can someone explain my why it's important?

Then I have the directive:

.directive("ngcScroll", function() {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            scope.customAlert();
            element.on('DOMMouseScroll mousewheel', function (e) {
                console.log('Element is being executed.');
            });
        }
    }
});

The console.log is executed, so that's not a problem, it's executed, but on the scope.customAlert() I receive the following error:

scope.customAlert is not a function.

I've found to do it like follow:

scope.$apply('customAlert()');

However, then I receive $apply is already in progress.

Anyone has an idea how I should achieve this?

Kind regards,

I do call it as: <ul ngc-scroll ... But that's working since the on scroll event is executed, but I don't get it to recognize my customAlert function :s — Complexity
– Complexity, Commented Nov 29, 2014 at 20:26
It does, but it seems that I've found the solution. However, I didn't know what I changed :) — Complexity
– Complexity, Commented Nov 29, 2014 at 21:16
I'll update it as soon as the code is finished because it's very cluttery right now. — Complexity
– Complexity, Commented Nov 29, 2014 at 21:17

Community · Accepted Answer · 2020-06-20 09:12:55Z

Try this,

1

myApp.directive("ngcScroll", function($rootScope) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes, ctrl) {  
            element.on('DOMMouseScroll mousewheel', function (e) {
                scope.$apply(function () {
                    scope.customAlert();
                })
            });
        }
    }
});

Demo: http://jsfiddle.net/HB7LU/8642/

2

<div ng-controller="MyCtrl">   
    <div ngc-scroll custom-alert="customAlert()"> ConTEN </div>   
</div>

JS

myApp.directive("ngcScroll", function() {
    return {
        restrict: 'A',
        scope: {
            customAlertFn: "&customAlert"
        },
        link: function (scope, element, attributes) {           
            element.on('DOMMouseScroll mousewheel', function (e) {
                scope.customAlertFn();
            });
        }
    }

});

& operator allows you to invoke or evaluate an expression on the parent scope of whatever the directive

Demo: http://jsfiddle.net/HB7LU/8640/

3

<div ngc-scroll> ConTEN </div>

JS

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $rootScope) {
    $scope.customAlert = function() {
        console.log('This ia scrolling demo.');
    }
    
    $scope.$on('customAlert', $scope.customAlert);
});

myApp.directive("ngcScroll", function($rootScope) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {  
            element.on('DOMMouseScroll mousewheel', function (e) {
                scope.$emit('customAlert');
            });
        }
    }
});

Complexity · Accepted Answer · 2014-11-29 21:19:22Z

0

Ok,

I've found the solution, which was quite simple in fact. I had defined the module in a wrong controller, but right now it's working without an issue.

This means the code looks like:

Controller:

.controller('OfficeUI', ['$scope', '$http', function($scope, $http) {
    var application = this;

    // Load up the JSon data string containing the definition of the ribbon.
    $http.get('/OfficeUI/Resources/JSon/application.json').
        success(function (data) {
            application.title = data.Title;
            application.icons = data.Icons;
        }).
        error(function (data) {
            // An error has occured while retrieving the data, so write it away in the logs.
            console.log('An error occured while retrieving the data.');
        });
}])

Directive:

.directive("ngcScroll", function() {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            element.on('DOMMouseScroll mousewheel', function (e) {
                scope.$apply(attributes['ngcScroll'], 'demo');
            });
        }
    }
});

HTML:

<div ngc-scroll="enableTab(this)" class="ribbon officeui-borders-border-bottom-grey" ng-controller="OfficeUIRibbon as ribbon">
    <ul role="tabs" class="officeui-space-no-margin officeui-space-no-padding officeui-borders-border-bottom-grey">
        <li role="tab" ng-repeat="tab in ribbon.tabs" ng-class="{ application: $first, active: !$first && ribbon.isActive(tab.Id) }" class="officeui-display-inline-block" ng-click="$first || ribbon.setTab(tab.Id)">
            <span>{{tab.Name}}</span>
            <div id="{{tab.contentId}}" ng-class="{ 'officeui-display-block': !first && ribbon.isActive(tab.Id), 'officeui-display-hidden': !first && !ribbon.isActive(tab.Id)}" class="contents officeui-position-absolute">
                {{tab.Contents}}
            </div>
        </li>
    </ul>
</div>

answered Nov 29, 2014 at 21:19

Complexity

5,8426 gold badges47 silver badges91 bronze badges

4 Comments

Luke101 Over a year ago

Good work. I'm glad you posted the solution to this. I've learned something new. I can't upvote as i have too many votes today.

Oleksandr T. Over a year ago

What about "I would just pass a function from the main controller without the = sign." ?

Complexity Over a year ago

@Alexander I'm sorry, I was wrong. I've removed that question.

Oleksandr T. Over a year ago

@Complexity this condition changes everything... :). Anyway thanks that shared your solution...

lostdorje · Accepted Answer · 2014-11-29 21:32:58Z

0

From inside your directive code this should work:

link: function (scope, element, attributes) {
    scope.$parent.customAlert();
    element.on('DOMMouseScroll mousewheel', function (e) {
        console.log('Element is being executed.');
    });
}

Access any methods and properties on the parent scope via:

scope.$parent

The caveat here is while this is a pretty direct way to access a parent scope's method, it's pretty inflexible as it will always be making assumptions about what exists on the parent scope. Using an isolate scope as suggested by Alexander gives much greater flexibility. When you place your directive inside different parent scopes you can pass the actual parent method you want to call into the directive via the HTML attributes.

edited Nov 29, 2014 at 21:32

answered Nov 29, 2014 at 21:20

lostdorje

6,58011 gold badges48 silver badges90 bronze badges

Comments

Dileep stanley · Accepted Answer · 2014-11-29 21:36:01Z

var myApp = angular.module('myApp',['ngRoute']);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});


myApp.controller("MyCtrl",['$scope',function($scope){
    $scope.$on("receive",function(f,e){
        alert(e);
    });
}]);
myApp.directive("ngcScroll", function() {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            element.on('DOMMouseScroll mousewheel', function (e) {
               scope.$emit("receive","djfhdfdhfdhfgdhf");
            });
        }
}

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.27/angular-route.js"></script>

<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <div ngc-scroll>
        A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />  A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created ...<br /><br /><br /><br /><br />


    </div>

</div>
  
  </div>

Collectives™ on Stack Overflow

AngularJS: Exeucting function from controller in a directive

4 Answers 4

1

2

3

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1

2

3

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related