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发出两次事件，第二个方法在第二个方法之后发出第二个方法。如果它是一个对象数组而不是简单的数组，它将更好用。

有可能吗？

修改

虽然我传递给此$on功能，例如此值{colorInHEX: "#ff0000"}和{colorInHSL: "hsl(0, 1%, 0.5%)"}但我收到了错误

TypeError：无法读取未定义的属性“firstValue”

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});

EDIT2

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

链接到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

修改

EDIT2

1 个答案: