解析工厂中声明的数组时“无法读取未定义的属性 'id'”答案

【问题标题】："Cannot read property 'id' of undefined" when parsing an array declared in a factory解析工厂中声明的数组时“无法读取未定义的属性 'id'”
【发布时间】：2015-02-27 10:49:44
【问题描述】：

我正在构建一个基本应用程序（使用 MEAN Web 框架和节点 webkit）以便更好地理解 angularjs。

这是我notificationFactory.js的内容

function notificationFactory() {

    var fooMessages = [

        {
            id: 4,
            dismissable: true,
            name: "fooooBaaar",
            function: '',
            showInTopBar: false,
            priority: "high",
            icon: 'fooIconBarBarBar',
            topBarIcon: 'fooIconIconIcon'
        },

        {
            id: 3,
            dismissable: true,
            name: "foofooBarBar",
            function: '',
            showInTopBar: false,
            priority: "high",
            icon: 'fooIconfooIcon',
            topBarIcon: 'IconIconIcon'
        },

        {
            id: 2,
            dismissable: true,
            name: "foo foo",
            function: '',
            showInTopBar: false,
            priority: "high",
            icon: 'fooBaaaaaar',
            topBarIcon: 'IconFooIcon'
        },

        {
            id: 1,
            dismissable: true,
            name: "foo",
            function: '',
            showInTopBar: false,
            priority: "high",
            icon: 'fooIcon',
            topBarIcon: 'fooIconIcon'
        },
    ]

    fooMessages.TopBarDismiss = function (message) {
        $.each(fooMessages, function (i, v) {
            if(v.id = message.id) {
                fooMessages.splice(i,1);
            }
        });

    }

    return fooMessages;

}

angular.module('fooDemo').factory('notificationFactory', notificationFactory);

我在 HTML 模板中调用 TopBarDismiss() 函数，使用：

<div class="fooDismiss" ng-click="notificationFactory.TopBarDismiss(message)">Dismiss</div>

当我按下我的关闭“按钮”后检查控制台时，我得到了这个：

 TypeError: Cannot read property 'id' of undefined
at notificationFactory.js:94
at Function.m.extend.each (jquery.min.js:2)
at Array.fooMessages.TopBarDismiss (notificationFactory.js:93)
at fb.functionCall (angular.js:10847)
at angular-touch.js:472
at k.$get.k.$eval (angular.js:12702)
at k.$get.k.$apply (angular.js:12800)
at HTMLDivElement.<anonymous> (angular-touch.js:471)
at angular.js:3097
at r (angular.js:325)angular.js:10072 (anonymous function)angular.js:7364 $getangular.js:12802 $get.k.$applyangular-touch.js:471 (anonymous function)angular.js:3097 (anonymous function)angular.js:325 rangular.js:3096 r.triggerHandlerangular.js:3111 S.(anonymous function)angular-touch.js:453 (anonymous function)angular.js:2853 (anonymous function)angular.js:325 rangular.js:2852 c

所以它必须是

$.each(fooMessages, function (i, v) {
    if (v.id == message.id) {
    } 
});

相当可怕的部分。

请你们帮我找出错误吗？

【问题讨论】：

Offtopic：我认为您不应该在您的工厂/控制器中使用 $.each。尝试将 jQuery 代码限制为仅指令，并使用 AngularJS 提供给您的提供的 jQuery 库。 Ontopic：你能给我们提供一个小提琴吗？
我试过了，它的行为和以前一样，因为每个“消息”都有一个“id”
为什么不fooMessages.forEach(function(mes) { ... });
感谢@Billy 的良好实践建议。
添加调试器； TopBarDismiss 函数开头的语句并检查消息变量的值。我怀疑 ng-click="notificationFactory.TopBarDismiss(message)" 没有传递给你正确的对象。

标签： javascript jquery angularjs angularjs-scope

【解决方案1】：

首先，如 cmets 所述，您需要确保传递的 message 对象确实是您要查找的对象。

那么，如果你只是想拼接你可以这样做：

fooMessages.TopBarDismiss = function (message) {
        var index;
        for (var i = 0; i < fooMessages.length; i++) {
            if(fooMessages[i].id == message.id) {
                index = i;
                break;
            }
        }
        if (index) {
              fooMessages.splice(index,1);
        } 

}

【讨论】：

【解决方案2】：

我认为您需要将message 传递给内部函数。在该范围内，message 是 undefined。

【讨论】：