代码之家 › 专栏 › 技术社区 › BT101

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

emit object oop angularjs javascript

BT101 · 技术社区 · 7 年前

从我的服务中,我用 $rootScope.$emit . 然后在控制器中 $on 此事件我将传递的数据存储在数组中。此时,我可以在 ng-repeat 指令。

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

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%)"} 我出错了

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

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

链接到plunker: link

1 回复 | 直到 5 年前

Faly 7 年前

如果ECMAScript 6不是问题,则可以使用Object。为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)