Angular controller is not defined

Question

I want to create some event handler in my directive's controller. Here is directive code:

module.exports = function() {
    return {
        restrict: 'EA',
        bindToController: true,
        scope: {
           myarticle: '=article'
        },
        controllerAs: 'ctrl',
        templateUrl: '../../views/draggableArticle.html',
        link: function(scope, element, attr) {
        },
        controller: function() {
            this.clicked = function() {
                alert('clicked');
            };
            this.dragstartHandler = function() {
                alert('draged');
           };
        }
    };
 };

And my view:

<div draggable="true" ondragstart="ctrl.dragstartHandler($event);" ng-click="ctrl.clicked()">
    <h2>{{ctrl.myarticle.webTitle | limitTo: 40}}</h2>
    <p>{{ctrl.myarticle.blocks.body[0].bodyTextSummary | limitTo: 200}}</p>
</div>

When I click on the block it works and alert "clicked", but when I drag a block it gives me an error:

Uncaught ReferenceError: ctrl is not defined

Andriy · Accepted Answer · 2016-09-17 19:11:41Z

1

ondragstart is native JS event fired from within global window scope, which is not aware of needed controller, while ng-click is fired from within controller's scope. We can load needed scope using angular.element(this).scope() function:

<div draggable="true" 
     ondragstart="angular.element(this).scope().ctrl.dragstartHandler();" 
     ng-click="ctrl.clicked()">
  <h2>{{ctrl.myarticle.webTitle | limitTo: 40}}</h2>
  <p>{{ctrl.myarticle.blocks.body[0].bodyTextSummary | limitTo: 200}}</p>
</div>

for the same reason angular $event is also unavailable, but you can still use all arguments passed to native function.

There is also angular module ngDraggable https://github.com/fatlinesofcode/ngDraggable, but it has an issue with firing drag start event - https://github.com/fatlinesofcode/ngDraggable/issues/89

answered Sep 17, 2016 at 19:11

Andriy

15.5k4 gold badges49 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular controller is not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related