Angular directive controller scope inheritance

Question

Lets start with some code

Html:

<rd-search-set type="'ActiveProfileContact'">
    <form class="navbar-form navbar-static-top" role="search">
        <rds-input />
    </form>
</rd-search-set>

rds-input template:

<div class="input-group rd-search-wrap">
<div class="input-group-addon">
    <i class="fa fa-search"></i>
</div>
<input type="text" value="" class="form-control" placeholder="{{'FIND_CONTACT' | translate | capitalize}}..." ng-modal="src.value" />
<div class="rd-search-state">
    <i class="fa spin2D fa-spinner" ng-if="src.isBusy"></i>
    <span class="text-muted rd-search-result" ng-if="!src.isBusy">{{src.amountString}}</span>
</div>

Javascript / AngularJs:

angular
    .module("App")
    .directive("rdSearchSet", rdSearchSet)
    .directive("rdsInput", rdsInput);

function rdSearchSet() {
    var directive = {
        restrict: 'E',
        scope: {
            onSearch: "=onSearch",
            searchForType: "=type",
            relatedGuids: "=rdSearchRelatedGuids",
            searchEventType: "=rdSearchEventType",
        },
        controller: "SearchController",
        controllerAs: "src",
        bindToController: true,
        replace: false,
    };

    return directive;
}

rdsInput.$inject = ["rdBaseUrl"];
function rdsInput(rdBaseUrl) {
    var directive = {
        restrict: 'E',
        replace: true,
        templateUrl: rdBaseUrl + "Partials/Directives/Search/rdsInput.html",
        require: "^rdSearchSet",
        transclude: true,
        scope: false,
    };

    return directive;
}

The problem

I'm having alot of trouble getting / setting data on the controller of the rdSearchSet directive. Last thing I tried is setting the rdsInput directive scope property to false, hoping that I can access the parent scope values using the controllerAs: "src" property of rdSearchSet.

My question in short: What is the best way to access the parent directive's controller(as) scope as transparent as possible? Like, use a Directive to load html and bind to parent directive scope properties, both ways.

EDIT:
I have moved the rdSearchSet directive html to a template that looks like this:

<form class="navbar-form navbar-static-top navbar-royal" role="search">
    <rds-input />
</form>
<rds-list />

rdSearchSet.$inject = ["rdBaseUrl"];
    function rdSearchSet(rdBaseUrl) {
        var directive = {
            restrict: 'E',
            scope: {
                onSearch: "=onSearch",
                searchForType: "=type",
                relatedGuids: "=rdSearchRelatedGuids",
                searchEventType: "=rdSearchEventType",
            },
            templateUrl: rdBaseUrl + "Partials/Directives/Search/rdsSearchSet.html",
            controller: "SearchController",
            controllerAs: "src",
            bindToController: true,
            replace: false,
        };

        return directive;
    }

The problem that still exists is that I am not able to use the ControllerAs prefix. The text input field in rdsInput uses a ng-model="src.value" but the value is not set in the rdSearchSet's Controller.

What's the thought behind adding this search to a directive? Would a basic search filter not work? — someoneHere
– someoneHere, Commented Jan 4, 2016 at 3:32
@someoneHere The controller behind these directives sends requests to the server to search for data. I have to use directives since I wanted to use this in multiple scenarios. — Jeroen Vorsselman
– Jeroen Vorsselman, Commented Jan 4, 2016 at 3:36
You can define a link function for your rdsInput directive and use the fourth argument (collection of required controllers) to access the parent controller scope aliased by controllerAs (i.e. something like ctrls[0].src). — miqh
– miqh, Commented Jan 4, 2016 at 3:38
@miqid I know that would work but I dont understand how 'scope: false' would work in this scenario, because 'scope: false' does not create a new scope and inherits the parent scope. Then what am I supposed to bind the controller properties to? And why can I not access the parent controller property names without the link method? — Jeroen Vorsselman
– Jeroen Vorsselman, Commented Jan 4, 2016 at 3:50

charlietfl · Accepted Answer · 2016-01-04 04:02:45Z

0

Two problems ... one is a simple typo for ng-model where you have ng-modal.

The other is isolated scope only works when you use a template, it doesn't work for existing html within the element.

If you move the <form> to a template your code will work

<rd-search-set></rd-search-set>

JS

function rdSearchSet() {
    var directive = {
        restrict: 'E',
        templateUrl:'search.html',
        scope: {
            .....,
        },
        controller: "SearchController",
        controllerAs: "src"
    };

    return directive;
}

DEMO

edited Jan 4, 2016 at 4:02

answered Jan 4, 2016 at 3:48

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

4 Comments

Jeroen Vorsselman Over a year ago

I have done that but it seems that the ControllerAs is not inherited by the child directives. Can this be done at all? I can post some code soon.

Jeroen Vorsselman Over a year ago

I have removed the controllerAs: "src" prefix in the child directive rdsInput and moved the value property to an object. This works, but I still one remaining question. It seems that the controllerAs: "src" can't be inherited by child directives, is this true and if so, why?

charlietfl Over a year ago

Update the demo showing where you are having issues. Not sure how you are trying to inherit or what it is exactly you are trying to do

Jeroen Vorsselman Over a year ago

Looks like I made a html syntax mistake, replaced <rds-search /> with <rds-search></rds-search>. Now the event for update value, $watch didn't work so I chose to use ng-keyup in the rdsInput directive. DEMO

Collectives™ on Stack Overflow

Angular directive controller scope inheritance

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related