Question

我是角色新手，使用带有ng-repeat的自定义指令时遇到问题。我想显示一些我从休息界面获得的帖子，然后在指令中使用他们的_id属性用于其他目的。然而，事实证明，当从函数内部使用时，属性始终是最后显示的帖子中的属性（下面的示例中的测试）。当试图直接在viewmodel上显示id时，它会显示正确的id。希望这是有道理的。任何帮助将不胜感激。

//directive.js

angular.module('app').directive('gnPost', myGnPost);

function myGnPost() {
    return {
        restrict: 'E',
        controller: 'postCtrl',
        controllerAs: 'postCtrl',
        bindToController: {
            post: '='
        },
        scope: {},
        templateUrl: 'template.html'
    };
};

//controller.js

angular.module('app').controller('postCtrl', myPostCtrl);

function myPostCtrl(postRestService) {
    vm = this;
    vm.test = function () {
        return vm.post._id;
    };
};

// template.html

<p>{{postCtrl.post._id}}</p>
//displays the right id

<p>{{postCtrl.test()}}</p>
//displays the id of the last element of ng-repeat

//parent page.html

<gn-post ng-repeat="singlePost in posts.postList" post="singlePost"></gn-post>

Answer 1

在您的控制器中，您有以下一行：

vm = this;

应该是：

var vm = this;

通过省略var，在全局范围内创建了一个vm变量，而不是每个控制器实例的本地变量。因此，在调用vm.test时的每次迭代，它总是指向最后一个控制器上定义的函数。

Fiddle - 尝试在var中包含/省略postCtrl

最好在Javascript中使用strict mode来防止此问题和其他问题。在严格模式下，不可能意外地创建全局变量，因为这样做会引发错误，您将立即看到问题。您只需在文件或函数的开头添加此行：

"use strict";

ng-repeat覆盖函数中的属性，但不覆盖视图模型中的属性

1 个答案: