Question

我目前正在尝试构建一个组件，该组件获取一个对象，该对象具有应该呈现的指令。

所以这是我的角度组件 componentRenderer.js

addLayer

/component-renderer/component-renderer.tpl.html ：

map.get('UIConfigurator').configureUI()

数据对象可以是这样的：

angular
    .module('app.core')
    .component('componentRenderer', {
        templateUrl: '/component-renderer/component-renderer.tpl.html',
        controller: ComponentRendererController,
        bindings: {
            data: '='
        }
    });

function ComponentRendererController($scope, $element, $timeout, $compile) {
    var vm = this;

    // Called when component is ready
    vm.$onInit = function () {
        if (vm.data.type !== 'plain') {
            var html = '<' + vm.data.type + ' ';
            if (vm.data.hasOwnProperty('options')) {
                angular.forEach(vm.data.options, function (value, key) {
                    if(typeof value === 'object') {
                        html += (key+'="value" ');
                    } else {
                        html += (key+'="'+value+'" ');
                    }
                });
            }

            html += '></' + vm.data.type + '>';

            var el = $compile(html)($scope);
            $element.find('.widget__content').append(el);
        }
    };
}

我的 componentRenderer 现在应该构建相应的html，以便可以获得以下结果：

<div class="widget">
<div class="widget__header">
    <h2>{{ $ctrl.data.title }}</h2>
</div>
<div class="widget__content">
    <h3>{{ $ctrl.data.subtitle }}</h3>
</div>

因此，先前显示的对象的选项应该呈现为组件的属性。最后，activity-widget组件应该呈现最终的html构造。

deviceActivity.js

{
    "type": "activity-widget",
    "options": {
      "type": "simple",
    }
    "title": "Activity"
  }

直到这里一切都按预期工作！但不，我也希望能够将选项用作对象。

<activity-widget type="simple"></activity-widget>

我的 componentRenderer 现在应该构建相应的html，以便可以获得以下结果：

angular
    .module('app.core')
    .component('deviceActivity', {
        templateUrl: '/device-activity/device-activity.tpl.html',
        controller: DeviceActivityController,
        bindings: {
            data: "="
        }
    });

可悲的是它没有工作，它没有将jsonObject绑定到我的组件。我不知道我做错了什么......非常感谢任何帮助！

提前致谢！

Answer 1

为什么它不起作用

所以你想得到这个

<activity-widget object="jsonObject"></activity-widget>

相反，这是生成的内容：

<activity-widget jsonObject="value"></activity-widget>

（它与componentRenderer.js应该输出的代码完全对应）

由于以下两个原因，正在生成的窗口小部件显然无法正常工作：

jsonObject =＆＃34; value＆＃34;：属性名称是驼峰式的，但应该像json-object一样指定
jsonObject = ＆＃34; value＆＃34; ：我不知道你在哪里尝试将jsonObject的值注入范围。所以价值未定义就不足为奇了

如何解决

如果你坚持认为这确实是你想要的

 <activity-widget object="jsonObject"></activity-widget>

根据您指定的对象，以下是您应该如何更改componentRenderer.js：

angular.forEach(vm.data.options, function (value, key) {
  if(typeof value === 'object') {

    // providing attribute=value pair correctly
    html += ('object="' + key + '" ');
    // adding object's value to the scope  
    // so that it is passed to the widget during compile below
    $scope[key] = value;

  } else {
    html += (key+'="'+value+'" ');
  }
});

请注意，通过这种方式，每个窗口小部件只能有一个对象类型的属性（所有其他属性都将被覆盖）。

尝试更改上面显示的代码，对我来说似乎工作正常。如果它仍然不适合你，请创建一个小提琴（实际上，这是你应该首先为这类问题做的）

angularjs：使用绑定动态构建可编译指令

1 个答案:

为什么它不起作用

如何解决