Angular Directive: Isolate Scope & Transclude is true, but HTML in the directive needs to continue to bind to parent $scope

Question

To start, I set up a JSFiddle here: http://jsfiddle.net/qLagkgt5/3/

I hope the title is clear, but basically, I am trying to use directives to help in repeatable html. In the example on JSFiddle, I am using a box directive with options for spacing and box-type.

The html that I am turning into repeatable code:

<div class="box">
    <div class="box-inner">
        {{CONTENT GOES HERE}}
    </div>
</div>

With optional classes:

<div class="box spacing-small box-rounded">
    <div class="box-inner">
        {{CONTENT GOES HERE}}
    </div>
</div>

What I'd like to be able to do is:

<box spacing="small" box-type="rounded">
    {{CONTENT GOES HERE}}
</box>

This is obviously a very simplified set of html that doesn't necessarily need a directive, but it is just an example to illustrate what I am running into.

Now to the angular side of things...

Here is my controller:

app.controller("Ctrl", ["$scope", function($scope) {

    $scope.text = "Starting Text... FOOBAR!";

}]);

And here is my directive:

app.directive("box", function() {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            spacing: "@",
            boxType: "@"
        },
        template: '<div class="box" ng-class="{\'spacing-{{spacing}}\' : spacing, \'box-{{boxType}}\' : boxType}"> <div class="box-inner" ng-transclude></div></div>'
    }
});

If I now place my directive inside html with a controller like this:

<div class="wrap" ng-controller="controller">
    {{text}}
    <box spacing="small">
        <input ng-model="text"/>
    </box>
</div>

The $scope.text that is outside the <box> is never updated when I change the input inside the box.

How do I make it so that when this directive is used, the content inside the box goes up to the parent scope rather then the isolated scope?
If I nest a box inside another box, can I also have it go up to the same parent scope?

Thanks!

score 0 · Accepted Answer · edited May 23 '17 at 11:57

I read something here on stackoverflow that immediately jumped in my head when I read your post. It said something like "If you do it without a dot you are doing it wrong..." I'll search for the article and post it here as soon as I found it but for now I think I "fixed" your code:

<div ng-app="app" ng-controller="Ctrl">
    <h1><span class="grey">$scope.data.text:</span> {{data.text}}</h1>
    <box spacing="large" box-type="rounded">
        <h2><span class="grey">$scope.text in box directive:</span> {{data.text}}</h2>
        <input ng-model="data.text" />
    </box>
    <box spacing="small" box-type="rounded-shadow">
        <h2><span class="grey">$scope.text in different box directive:</span> {{data.text}}</h2>
        <input ng-model="data.text" />
    </box>
</div>

var app = angular.module("app", []);

app.controller("Ctrl", ["$scope", function($scope) {

    $scope.data = {};
    $scope.data.text = "Starting Text... FOOBAR!";

}]);

app.directive("box", function() {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            spacing: "@",
            boxType: "@"
        },
        template: '<div class="box" ng-class="{\'spacing-{{spacing}}\' : spacing, \'box-{{boxType}}\' : boxType}"> <div class="box-inner" ng-transclude></div></div>'
    }
});

You have to create an object and use this for databinding. I am now using "data.text" and do the binding with this expression.

Cheers, Tim.

P.S.: There are a lot of links.

To mention only two:

AngularJS: If you are not using a .(dot) in your models you are doing it wrong?

AngularJS: dot in ng-model

Angular Directive: Isolate Scope & Transclude is true, but HTML in the directive needs to continue to bind to parent $scope

1 Answers1