Home/ Questions/Q 8958487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T15:13:28+00:00

I find passing variables to a directive using isolated scope doesn’t work the same

  • 0

I find passing variables to a directive using isolated scope doesn’t work the same for different instantiations of the same directive.

For example, here’s a basic directive that takes some arbitrary data and displays it in a simple template:

var module = angular
    .module('myModule', [])
    .directive('isolatedScopeDirective', function() {
        return {
            restrict: 'CA',
            template: '<div>data: {{data}}</div>',
            scope: {
                data: '='
            }
        };
    });

And here’s some mark-up that instantiates it once via class, and once via annotation:

<body ng-app='myModule' ng-init='anArray=[1,2,3]'>
    <h1>Directive using class:</h1>
    <div class='isolatedScopeDirective' data='anArray'></div>

    <h1>Same directive using annotation:</h1>
    <div isolated-scope-directive='{{data=anArray}}'></div>
</body>​​​​​​​​​​​​​​​​​

The result I get from this is:

Directive using class:
data: [1,2,3]

Same directive using annotation:
data:

(See for yourself: http://jsfiddle.net/Prnbe)

If I take the scope property off of the directive, meaning I stop using isolated scope, the data is passed correctly in both cases. To me, this says my setup is correct, and either the class or annotation handling of isolated scope is broken.

Am I doing something wrong? Or is this a bug in AngularJS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Based on how you have the code setup, I believe your attribute usage should look like this instead:

    <div isolated-scope-directive data='aString'></div>

    This:

    <body ng-app='myModule' ng-controller='myController'>
    <h1>Directive using class:</h1>
    <div class='isolatedScopeDirective' data='aString'></div>
    <br/>
    <h1>Same directive using annotation:</h1>
    <div isolated-scope-directive data='aString'></div>
</body>​​​​​​

    Outputs:

    Directive using class:
data: test

Same directive using annotation:
data: test
    • 0