CODEWITHSUNDEEP
javascriptangularjs
João Martins
João Martins

Reputation: 1046

Directive accessing to parent controller function without $scope

So I have this directive that has its own scope but I want to access to a function inside its parent controller. I can do this if the parent controller exposes the function with a $scope.getElementsList(), although I'm trying to avoid the use of $scope and I have the function exposed with self.getElementsList() and the directive cannot reach it.

Directive: 

angular.module('myApp').directive('accountBalance', function() {
  return {
    scope: {
        elementId: '=elementid'
    },
    transclude: true,
    restrict: 'E',
    templateUrl: '../views_directives/account-balance.html',

    controller: function($scope) {
        $scope.removeElement = function(){
            //this where I want to access the parent function
            console.log($scope.$parent.getElementsList());
            console.log("ALSO I WANT TO ACCESS THIS DIRECTIVE elementId WITHOUT USING $scope", $scope.elementId);
        }
    }
  };
});

ParentController:

angular.module('myApp').controller('AppDesignCtrl', function ($scope) {
    var self = this;
    self.elementsList = [];
    self.getElementsList = function(){
        return self.elementsList;
    }

});

I also want to know what is the best way to access, inside the directive controller, the data passed to the directive's $scope.

scope: {
    elementId: '=elementid'
},

UPDATE

<div>
   <i class="fa fa-arrows element-drag"></i>
   <i class="fa fa-trash-o element-remove" ng-click="removeElement()"></i>
</div>

And what about calling functions from the directive template inside the controller of the directive? Do I need to expose them with something like $scope.removeElement()? How do I use this.removeElement() and be able to access it from the template?

Sorry about the long question. I'm trying to set the best practices to my new project since I've been away from angular for a year+.

Thanks in advance

Upvotes: 1

Views: 196

Answers (2)

Estus Flask
Estus Flask

Reputation: 222493

It is generally not recommended, because directives are meant to be self-contained. It isn't critical if you don't plan to reuse the directive. And wise usage of isolate scope can solve this.

angular.module('myApp').directive('accountBalance', function() {
  return {
    scope: {
        outerScope: '@'
        elementId: '='
    },
    transclude: true,
    restrict: 'E',
    templateUrl: '../views_directives/account-balance.html',

    controller: function($scope) {
        console.log("we can use anything from other controller", $scope.outerScope.elementsList)
        $scope.elementId = "and share data with any other scope";
    }
  };
});

Controller is defined as ng-controller="AppDesignCtrl as appDesign", and directive usage is

<account-balance element-id="sharedParentScopeVar" outer-scope="appDesign">

So there won't be any problem if the directive should be moved to other controller.

I guess 'best practice' may be to set up a service that embraces the data and is used by both app controller and directive, so directive controller operates on data items and not DOM elements.

And what about calling functions from the directive template inside the controller of the directive? Do I need to expose them with something like $scope.removeElement()?

You surely don't. If there's a need to use functions from outside, you're doing something wrong. Send a message to respective element to run the function if it is DOM-related. Or put the function into the service if it is data-related.

Upvotes: 1

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

(Going from bottom to top...)

To call functions in the controller without using the scope in Angular >= 1.2, use the controllerAs syntax:

<div ng-controller="AppDesignCtrl as appDesignCtrl">
    ...
    <i class="fa fa-trash-o element-remove" ng-click="appDesignCtrl.removeElement()"></i>
</div>

And removeElement() must be a method of the controller:

angular.module('myApp').controller('AppDesignCtrl', function ($scope) {
    ...
    this.removeElement = function() {
        ...
    };
});

To access the scope data from the controller in Angular >= 1.3, use the new bindToController: true configuration (this is especially useful when combined with the new controllerAs syntax):

angular.module('myApp').directive('accountBalance', function() {
    return {
        ...
        scope: {
            elementId: '=elementid'
        },
        controller: function() {
            // now elementId is a member of the controller:
            console.log(this.elementId);
        }
    };
});

Having said these, the answer to how you can call getElementsList from the directive would be:

angular.module('myApp').directive('accountBalance', function() {
    return {
        ...
        scope: {
            elementId: '=elementid',
            getElementList: '&'
        },
        controller: function() {
            ...
            // invoking the expression that was passed to us
            var theElements = this.getElementList();
        }
    };
});

The correct expression should be passed as:

<div ng-controller="AppDesignCtrl as appDesignCtrl">
    <account-balance element-id="xxx"
        get-elements-list="appDesignCtrl.getElementsList()"></account-balance>
</div>

Upvotes: 1

Related Questions