AngularJS interpolates array to string inside directive

Question

TL;DR directive interpolates array as string..
http://plnkr.co/edit/ZwV8jmi0tUTgezWlEq3S?p=preview

Here is code:
index.html

<!DOCTYPE html>
<html data-ng-app="foo">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body data-ng-controller="FooCtrl">
    <ul data-foo="{{foo.bar}}">
      <li data-ng-repeat="bar in foo.bar">
        {{bar}}
      </li>
    </ul>
  </body>

</html>

app.js

!(function(ng) {
  'use strict';

  FooCtrl.$inject = ['$scope'];
  function FooCtrl($scope) {
    $scope.foo = {
      bar: [
        'foo',
        'bar'
      ]
    };
  }

  function FooDirective() {
    return {
      restrict: 'A',
      scope: {
        model: '@foo'
      },
      link: function($scope) {
        var watcher = function(model) {
          console.log(model, typeof model);
        };

        $scope.$watch('model', watcher, true);
      }
    };
  }

  ng.module('foo', [])
    .controller('FooCtrl', FooCtrl)
    .directive('foo', FooDirective);
})(window.angular);

Why do I have "typeof model" string instead of array?

Sebastian · Accepted Answer · 2014-05-12 07:55:34Z

1

If you want to bind the actual array of the parent scope use:

scope: {
  model: '=foo'
}

When using @foo you are just binding the result of the expression {{foo.bar}}. In your case the string interpretation of the array foo.

Addition

As an alternative you can call an expression on the parent scope from the isolated scope when you use the & symbol:

scope: {
  model: '&foo'
}

and evaluate it in your directive using:

model().bar

edited May 12, 2014 at 7:55

answered May 12, 2014 at 7:43

Sebastian

17.6k5 gold badges51 silver badges57 bronze badges

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

2 Comments

Miraage Over a year ago

I don't wanted to use two-way binding because of additional watchers. So, looks like I have to use it.

Sebastian Over a year ago

@Miraage I added another option using &

Collectives™ on Stack Overflow

AngularJS interpolates array to string inside directive

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related