Question

TL; DR 指令将数组插入为字符串..
http://plnkr.co/edit/ZwV8jmi0tUTgezWlEq3S?p=preview

这是代码：
的的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);

为什么我有“typeof model”字符串而不是数组？

Answer 1

如果要绑定父作用域的实际数组，请使用：

scope: {
  model: '=foo'
}

使用@foo时，您只是绑定表达式{{foo.bar}}的结果。在您的情况下，数组foo的字符串解释。

<强>加成

作为替代方法，当您使用&符号时，可以从隔离范围调用父作用域上的表达式：

scope: {
  model: '&foo'
}

并使用以下命令在您的指令中对其进行评估：

model().bar

AngularJS将数组插入到指令内的字符串中

1 个答案: