Question

我已经在控制器中创建了一个带有对象的项目列表

$scope.devices = [
    {"id": 0, "name": "sw", "class": 'sw' },
    {"id": 1, "name": "mlr", "class": 'mlr'},
    {"id": 2, "name": "lvm", "class": 'lvm'},
    {"id": 3, "name": "ltc", "class": 'ltc'},
    {"id": 4, "name": "fr", "class": 'fr'},
    {"id": 5, "name": "cap", "class": 'cap'}
];

在我的HTML中

和ng-repeat

<li ng-repeat="device in devices" ng-click="selected(device.id)"></li>

我可以跟踪一个被$scope.selected点击的项目，该项目已绑定到基本的ng-click。

然而，在一个甚至火灾的指令中，后来呢？如何从元素中收集信息？具体来说它是来自哪个原始对象？

// A device is grabbed
ums.directive('draggable', function (){

return function ($scope, element, attr){
    // restrict: "A",
    // link: function (){}

    var el = element[0];
    el.draggable = true;

    el.addEventListener(
        'dragstart',
        function(e) {
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('Text', this.id);
            this.classList.add('drag');

            // when this event is fired I want the corresponding object id from $scope.devices
            console.log(el.$scope.device.id); // my first inclination

            return false;
        },
        false
    );

}

})

Answer 1

ng-repeat 指令为它添加到DOM的每一行创建一个范围。每个范围都是由 ng-repeat 设置的特殊属性。

＆＃xA;＆＃xA;

来自文档：

＆＃xA;＆＃xA ;

＆＃XA;
ngRepeat 指令从集合中为每个项目实例化一次模板。每个模板实例都有自己的作用域，其中给定的循环变量设置为当前集合项， $ index 设置为项索引或键。
＆＃xA;

＆＃xA;＆＃xA;

范围继承自 $ parent 范围。在你的指令的链接函数中，你可以使用 scope。$ parent.devices [scope。$ index] 来访问原文，但它也在本地范围内。

＆＃xA;＆＃xA;

有关详细信息，请参阅 AngularJS ngRepeat API参考。

＆＃xA;＆＃xA;

使用示例更新

＆＃xA;＆＃xA;

此示例显示获取$ index的指令并为控制器发出自定义事件。

＆＃xA;＆＃xA;

指令

＆＃xA;＆＃xA;

  ums.directive（'draggable'，function（）{＆＃xA; function postLinkFn（scope，elem，attr）{＆＃xA; console.log（“instantiating directive”）;＆＃xA;＆＃ xA; elem.prop（'draggable'，true）;＆＃xA;＆＃xA; elem.on（'dragstart'，＆＃xA; function（e）{＆＃xA; elem.addClass（'drag'） ;＆＃xA; console.log（“dragstart index =”，scope。$ index）;＆＃xA; //为控制器发出事件＆＃xA;范围。$ emit（“umsDragstart”，e）;＆＃xA; return false;＆＃xA;}＆＃xA;）;＆＃xA;}＆＃xA; return postLinkFn;＆＃xA;}）＆＃xA;

＆＃x A;＆＃xA;

在控制器中

＆＃xA;＆＃xA;

  $ scope。$ on（“umsDragstart”，function（$ event，rawEvent）{＆＃xA;的console.log（$事件）;＆＃XA; console.log（rawEvent.x，rawEvent.y）;＆＃xA; console.log（“umsDragstart id =”，$ event.targetScope.device.id）;＆＃xA; }＆;＆＃xA;

＆＃xA;＆＃xA;

请注意，该示例使用 elem 上的 jqLite 方法 postLinkFn 的参数。这些方法记录在 AngularJS angular.element API Reference 中。 href =“https：//docs.angularjs .org / api / ng / type / $ rootScope.Scope＃$ on“rel =”nofollow“> AngularJS $ rootScope.scope API参考 - $ on 和 API Reference - $ emit 。

＆＃xA;

Answer 2

如果您在编写selected()函数的控制器中使用该指令，则可以将id分配给某个范围变量并在指令中访问它。否则，如果您在ng-repeat中使用该指令，那么您可以为指令设置自定义范围变量并将当前ID传递给它。或者给出一个代码示例

使用ng-repeat创建元素后，可以正确跟踪对象ID

2 个答案:

使用示例更新