CODEWITHSUNDEEP
javascripthtmlangularjs
Complexity
Complexity

Reputation: 5830

AngularJS: Exeucting function from controller in a directive

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,

Upvotes: 1

Views: 163

Answers (4)

Oleksandr T.
Oleksandr T.

Reputation: 77512

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');
            });
        }
    }
});

Upvotes: 1

Dileep stanley
Dileep stanley

Reputation: 148

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>

Upvotes: 0

lostdorje
lostdorje

Reputation: 6470

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.

Upvotes: 0

Complexity
Complexity

Reputation: 5830

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>

Upvotes: 0

Related Questions