javascript - 扩展空对象以在事件发出时填充它 angularJS

Question

在我的服务中，我使用 $rootScope.$emit 发出事件.然后在 Controller 中 $on这个事件我将传递的数据存储在数组中。此时，我可以在 ng-repeat 中显示这些值指令。

在消防服务功能上，它将两个新值存储到我在 Controller 中的数组中。这个解决方案很好并且有效，但现在我需要在许多不同的地方显示它，所以我想保存它而不是一个数组，而是一个数组对象。不幸的是，这对我来说是有问题的，我不知道如何在 javascript 中创建空数组对象，以便它可以在每次发射时扩展。

空数组对象的架构如下所示:

arrayObject = [
    {
        firstValue: value,
        secondValue: value
    }
];

我需要用事件 Controller 中的数据来扩展它，现在，我保存到简单数组的代码如下所示:

$rootScope.$on('colorChanged', function(event, data) {
  console.log('colorChanged event emitted');
  console.log(data);
  if(data) {
      vm.convertedColors.push(data);
  }
});

Data是服务传来的字符串。

当我从服务中触发函数时，它会执行 2 个方法并发出两次事件，一次是在完成第一个方法时使用 firstValue，第二次是在第二个方法之后使用 secondValue。如果它是对象数组而不是简单数组，使用起来会好得多。

这可能吗？

编辑

虽然我传递给这个$on函数例如这个值 {colorInHEX: "#ff0000"}和 {colorInHSL: "hsl(0, 1%, 0.5%)"}我遇到了一个错误

TypeError: Cannot read property 'firstValue' of undefined

vm.convertedColors = [];

$rootScope.$on('colorChanged', function(event, data) {
    console.log('colorChanged event emitted');
    console.log('colors in others: (in controller)' + data);
    console.log(data);
        lastObj = vm.convertedColors[vm.convertedColors.length - 1];
        if (!lastObj.firstValue || !lastObj.secondValue) {
            vm.convertedColors[vm.convertedColors.length - 1] = Object.assign(lastObj, data);
        } else {
            vm.convertedColors.push({});  // Push a new empty object
        }
    }
});

$rootScope.$emit('colorChanged', {colorInHSL});
$rootScope.$emit('colorChanged', {colorInHEX});

编辑2

所以现在的问题是这是替换而不是添加新的，我创建了 plunker 演示问题。来自服务的数据在这一个中被硬编码，所以每当我单击按钮时值都是相同的，但它仍然应该创建一个新的 <li>只是具有相同的值(value)。

plunker 链接:link

Answer 1

如果 ECMAScript6 没有问题，您可以使用 Object.assign 为 firstValue 和 secondValue 属性设置值:

// In your controller:
vm.convertedColors = [{}];

$rootScope.$on('colorChanged', function(event, data) {
    if(data) {
        var lastObj = vm.convertedColors[vm.convertedColors.length - 1];
        if (!lastObj.colorInHSL || !lastObj.colorInHex) {
            vm.convertedColors[vm.convertedColors.length - 1] = Object.assign(lastObj, data);
        } else {
            vm.convertedColors.push(Object.assign({}, data));  // Push a new object
        }
        $timeout(function() {});     // Force a new $digest cycle so view is updated.
        console.log("Array: ", vm.convertedColors);
    }
});

// Emitting in your service:

var colorInHSL = 'hsl(' + 1 + ', ' + 100 + '%, ' + 100 + '%)';
$rootScope.$emit('colorChanged', {colorInHSL: colorInHSL});
setTimeout(function() {
    $rootScope.$emit('colorChanged', {colorInHex: "#ff0000"});  
}, 3000);  // Wait 3 seconds before emiting the second value (just to see how things works)