Why is the Angular directive misinterpreting the value?

M

Mikhail Osher2014-05-12 10:28:40

JavaScript

Mikhail Osher, 2014-05-12 10:28:40

TL;DR
instead of an array - the line
plnkr.co/edit/ZwV8jmi0tUTgezWlEq3S?p=preview
Actually, the code itself.

!(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);

<!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>

After all, it should be an array, not a string.
What am I doing wrong?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

Mikhail Osher, 2014-05-12
@miraage

The answer has been found.
The fact is that in my case, binding is used in one gate - "@" and the interpreted value is written to the model. In my case, a string representation of an array.
If you use the associated model "=", then everything is fine.

scope: {
  model: '=foo'
},

<ul data-foo="foo.bar">