CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Jeroen Vorsselman
Jeroen Vorsselman

Reputation: 823

Angular directive controller scope inheritance

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.

Upvotes: 0

Views: 429

Answers (1)

charlietfl
charlietfl

Reputation: 171679

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

Upvotes: 0

Related Questions