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

Question

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

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

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

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

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

$rootScope.$on('colorChanged', function(event, data) {
  console.log('colorChanged event emitted');
  console.log(data);
  if(data) {
      vm.convertedColors.push(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> 只是具有相同的值。

Link 到 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)

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

Extend empty object to fill it on event emitted angularJS

javascript

angularjs

oop

object

emit

编辑

编辑2