Question

我有一个相当令人沮丧的情况，这个代码在单独使用时工作得很好但是如果我尝试将它放在另一个指令中，则console.log输出[object Object]而不是实际对象。我无法弄清楚发生了什么。

JS

 (function () {

  'use strict';

    angular.module('stn-core')
        .directive('htmlContent', htmlContent);

  function htmlContent () {
    return {
      restrict: 'AE',
      templateUrl: 'content-blocks/html-content/html-content.html',
      scope: {
        data: "="
      },
      link: function (scope, elem, attrs) {
        console.log(scope.data);
        scope.componentName = 'html-content';
      }
    };
  }

})();

模板

{{data | json}}
<div class="html-content">
    <div ng-bind-html="data.data[data.data.type]"></div>
</div>

导致问题的指令的位置（另一个指令模板）

<div class="conference-location">
  <html-content data="data.topHtml" class="con-location-html1 col-lg-12 col-md-12 col-sm-12 sol-xs-12"></html-content>
  <div ng-bind-html="data.bottomHtml" class="con-location-html2  col-sm-6 col-xs-12"
       ng-class="{'col-lg-6 col-md-6':width< 100, 'col-lg-8 col-md-7':width === 100}"></div>
  <div class="conference-location-widget  col-sm-6 col-xs-12"
       ng-class="{'col-lg-6 col-md-6': width < 100, 'col-lg-4 col-md-5':width===100}">
    <stn-location data="data.conference"></stn-location>
  </div>
</div>

Answer 1

您需要将其作为字符串进行控制并转换为字符串，您可以使用JSON对象的stringify方法。

尝试如下：

console.log(JSON.stringify(scope.data));

Answer 2

所以基本上我使用的属性名称存在问题。如果我传入'data'而不是'data.topHtml'，我注意到对象然后记录为

data : {
 topHtml: '[object Object]'
}

当使用的名称包含大写字母甚至减号时，似乎会出现此问题。我通过将名称更改为tophtml并更新模板以使用它来修复它。

为什么在将数据传递给指令时会获得[object Object]？

2 个答案: