Adding a function to the scope of an Angular custom directive

Question

I have the following angular directive.

// The component panel
app.directive('component', function () {       
return {
    restrict: 'AE',

    scope: {

        heading: '@heading',
        componentType: '@componentType'


        getComponentUrl: function() {

        var componentPath = "./shell/partials/components/" + componentType + ".html";
        return componentPath;

    }
},


    template: '\
    <div id="panel" class="panel panel-primary panel-component fill scrollable">\
        <div class="panel-heading">\
            <div class="row">\
                <div class="col-sm-6">\
                    <h2 class="panel-title">{{heading}}</h2>\
                </div>\
                <div class="col-sm-6">\
                    <button type="button" class="btn btn-default pull-right btn-expand" data-toggle="tooltip" data-placement="left" title="Go fullscreen" ng-click="">\
                    <i class="fa fa-expand"></i></button>\
                </div>\
            </div>\
        </div>\

        <div class="panel-body fill">\

            <!-- include is used here as different component types may have different attributes\
            so includes are placed here and the directives used within the includes.\
            -->\

            <div ng-include="getComponentUrl()"> </div>\

        </div>\
    </div>\
    ',

    link: function(scope, elm, attrs) {

     }
}
});

As you can see I use the following in the directive's scope:

getComponentUrl: function() { ... }

This doesn't seem to work.

I am trying to supply my ng-include with a predefined string. I appreciate that there are other ways to do this but I wondered i Angular have a means of putting methods into the scope of a directive?

Many Thanks, Kiran

use the link function, where you receive that scope and then add the method there — harishr
– harishr, Commented Apr 1, 2015 at 13:27

harishr · Accepted Answer · 2015-04-01 13:29:31Z

1

try

app.directive('component', function () {       
return {
    restrict: 'AE',
    link : function(scope){
       scope.getComponentUrl = function() {

        var componentPath = "./shell/partials/components/" + componentType + ".html";
        return componentPath;

    }
    },
    scope: {

        heading: '@heading',
        componentType: '@componentType'



},

answered Apr 1, 2015 at 13:29

harishr

18.1k9 gold badges84 silver badges131 bronze badges

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

2 Comments

K-Dawg Over a year ago

Ah that seems obvious now but I couldn't see it at the time. Thank you!

K-Dawg Over a year ago

sure... sorry forgot!

Calden · Accepted Answer · 2015-04-01 13:32:13Z

0

You have to move getComponentUrl: function() { ... } to the link directive method. Add this method to a $scope attributes. And make reference to this function within the template .

answered Apr 1, 2015 at 13:32

Calden

765 bronze badges

Collectives™ on Stack Overflow

Adding a function to the scope of an Angular custom directive

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related