angularjs - 如何将对象传递给 angular.js 指令？插值参数似乎已序列化

Question

我正在尝试将 JavaScript 对象传递给 angular 指令。我这样调用它：

<thing-badge thing="{{thing}}"></thing>

该指令看起来像这样：

directives.directive('thingBadge', function() {
    return {
        restrict: 'E',
        controller: function($scope) {
        },
        link: function(scope, element, attrs, $scope) {

          attrs.$observe('thing', function(thing) {
              console.log(thing);
          }
        }
     }
}

假设那个东西是一个 JS 对象：{'an': "object'}. 我想在我的指令中获取这个对象的值。相反，我得到了对象的序列化：'{"an": "object"}'字符串类型。

如果我传入number(eg <thing-badge thing="{{thing.id}}"></thing>) 我也会得到一个字符串，例如"0".

我如何在那里传递一个实际的对象？

Answer 1

您需要添加一个隔离范围：

directives.directive('thingBadge', function() {
    return {
        restrict: 'E',
        scope: {
            thing: '='
        },
        controller: function($scope) {
        },
        link: function(scope, element, attrs, $scope) {

          attrs.$observe('thing', function(thing) {
              console.log(thing);
          }
        }
     }
}

并且您不需要元素中的花括号符号：

<thing-badge thing="thing"></thing-badge>