Binding global scope variable to directive local variable

Question

I'm having trouble understanding scope linking between controllers and directives.

What I'm trying to do (which should help me learn a lot) is bind $scope.systems in my controller to data in my directive.

So I setup a simple directive call:

<combobox data="systems"></combobox>

I also tried binding the variable, but it didn't make sense to me.

<combobox data="{{systems}}"></combobox>

Then I created my driver as such

.directive('combobox', function ($timeout) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '/angular/directives/combobox.php',
        link: function (scope, element, attrs) {
            console.log(attrs.data);
            $timeout(function () {
                console.log(scope.systems);
                console.log($scope[attrs.data]);
            }, 1000);
        }
    }
});

I considered adding a scope parameter to the directive return

scope: {
    'systems': '='
}

Or

scope: {
    'systems': '=data'
}

I've been able to setup simple directives where values are bound to the directive scope, and they've worked. Now I'm trying to create a reusable directive where I can tell it what data from the controller scope to use, and I'm just stuck.

jlowcs · Accepted Answer · 2015-03-17 20:48:16Z

1

This should work. Although I'm not sure why your template is a php file...

<combobox data="foo"></combobox>
<combobox data="bar"></combobox>

app.directive('combobox', function ($timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            //this will set $scope.systems
            //with the value gotten from evaluating what is in
            //the data attribute
            'systems': '=data'
        },
        templateUrl: '/angular/directives/combobox.php',
        link: function (scope, element, attrs) {
            console.log(scope.systems);
        }
    }
});

BTW, don't use replace. The Angular team said it will probably disappear soon because it is causing too many issues and is not that necessary anyway.

edited Mar 17, 2015 at 20:48

answered Mar 17, 2015 at 20:41

jlowcs

1,9331 gold badge11 silver badges16 bronze badges

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

5 Comments

Rohit Over a year ago

I'm learning Angular by replacing parts of a current website with Angular; parts of it are still PHP driven, so out of habit, I create PHP files. I know I can just make them HTML. Also, isn't replace necessary for when you want to pass an ID or class? Finally, that doesn't quite do what I want. I want to be able to reference regardless of what I pass to data. In this case, its systems, in another it may be users. Referencing scope.systems removes the point of an attribute.

jlowcs Over a year ago

replace will just replace the tag from your markup with the primary tag from your directive's template, trying to merge the attributes (and sometimes failing to do so correctly). If you want to add a class to the directive's element (ie the one from your main markup), just do so using the element parameter of your directive's link function.

jlowcs Over a year ago

I don't think you're getting how the = works. I just edited my answer to make it clearer. It should work the way you want.

Rohit Over a year ago

Yah, I think I'm missing some fundamental part of how the isolate scopes work. Your code works (I tried something almost identical before, not sure why it failed), so now I have to go back to the basics and understand WHY it works.

jlowcs Over a year ago

There are a few concepts that are not easy to grasp in Angular. It took me a while. You'll need to understand scopes (and scope inheritance), data-binding, watchers, expressions (see $parse and $scope.$eval)... start by reading the angular doc. And I think there are some interesting posts on SO.

Collectives™ on Stack Overflow

Binding global scope variable to directive local variable

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related