跟踪对象ID创建具有纳克重复元素后正常 [英] Keep track of object ids properly after creating elements with ng-repeat

问题描述

我创建的项目清单与对象我的控制器内

  $ scope.devices = [
    {ID：0，名：SW，一流：SW}，
    {ID：1，名：MLR，一流：国土资源部}，
    {ID：2，名：LVM，一流：LVM}，
    {ID：3，名：LTC，一流：LTC}，
    {ID：4，名：FR，一流：FR}，
    {ID：5，名：盖，一流：盖'}
];
 

和NG-重复在我的HTML

 ＆LT;李NG重复=设备设备NG点击=选择（device.id）＆GT;＆LT; /李＆GT;
 

我可以跟踪绑定到点击与 $ scope.selected 的项目我的 NG-点击这是基本的。

然而，怎么样以后，在一个指令时甚至火灾？我怎样才能收集元素的信息？特别是原来的对象ID它是从哪里来的？

  //一个设备抓起
ums.directive（拖动，函数（）{返回函数（$范围，元素，属性）{
    //限制：A，
    //链接：功能（）{}    变种埃尔=元素[0];
    el.draggable = TRUE;    el.addEventListener（
        的dragstart'，
        功能（E）{
            e.dataTransfer.effectAllowed =搬家;
            e.dataTransfer.setData（文本，this.id）;
            this.classList.add（'拖'）;            //当触发此事件我想从$ scope.devices相应的对象标识符
            的console.log（EL $ scope.device.id）; //我的第一个倾向            返回false;
        }，
        假
    ）;}}）
 

解决方案

的 NG-重复指令会为每个它添加到DOM线范围。在每个范围将特殊的属性由设置纳克重复。

从文档：

  

的 ngRepeat 指令从集合实例每个项目一次的模板。每个模板实例都有自己的适用范围，在给定的循环变量设置为当前集合项目， $指数设置为项目索引或键。

的范围从 $父继承范围。在你指导的链接功能，可以使用范围。$ parent.devices [范围。$指数] 来访问原来的，但它也是在局部范围内为好。

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

更新与例如

这个例子说明了指令得到$指数，也为发射控制器使用自定义的事件。

该指令

  ums.​​directive（拖动，函数（）{
    功能postLinkFn（范围，ELEM，ATTR）{
        的console.log（实例化指令）;        elem.prop（拖动，真正的）;        elem.on（'的dragstart'，
            功能（E）{
                elem.addClass（'拖'）;
                的console.log（指数的dragstart =，范围$指数）;
                //用于发射控制器事件
                。范围$放出（umsDragstart，E）;
                返回false;
            }
        ）;
    }
    返回postLinkFn;
}）
 

在控制器

  $范围。在$（umsDragstart功能（$事件，rawEvent）{
         的console.log（$事件）;
         的console.log（rawEvent.x，rawEvent.y）;
         的console.log（umsDragstart ID =，$ event.targetScope.device.id）;
    }）;
 

注意，例如使用在 ELEM jqLit​​e 方法的 postLinkFn <参数/ code>。这些方法都记录在 AngularJS angular.element参考。

的 $关于和 $发出方法都在的 AngularJS $ rootScope.scope API参考 - $上和的 API参考 - $ EMIT

I have created a list of items with an object inside my controller

$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'}
];

and ng-repeat in my HTML

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

I can keep track of an item that is clicked with $scope.selected bound to my ng-click that's basic.

However, what about later on, in a directive when an even fires? How can I collect information from the element? Specifically the original object id it came from?

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

}

})

解决方案

The ng-repeat directive creates a scope for each line that it adds to the DOM. On each scope will be special properties set by ng-repeat.

From the Docs:

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

The scope inherits from $parent scope. In your directive's linking function, you can use scope.$parent.devices[scope.$index] to access the original but it is also on the local scope as well.

For more information see the AngularJS ngRepeat API Reference.

Update with example

This example shows the directive getting the $index and also emitting a custom event for the controller to use.

The directive

ums.directive('draggable', function (){
    function postLinkFn (scope, elem, attr){
        console.log("instantiating directive");

        elem.prop('draggable', true);

        elem.on ('dragstart',
            function(e) {
                elem.addClass('drag');
                console.log("dragstart index =", scope.$index);
                //emit event for controller
                scope.$emit("umsDragstart", e);
                return false;
            }
        );
    }
    return postLinkFn;
})

In the controller

    $scope.$on("umsDragstart", function ($event, rawEvent){ 
         console.log($event);
         console.log(rawEvent.x, rawEvent.y);
         console.log("umsDragstart id =", $event.targetScope.device.id);
    });

Notice that the example uses jqLite methods on the elem parameter of the postLinkFn. Those methods are documented in the AngularJS angular.element API Reference.

The $on and $emit methods are documented in the AngularJS $rootScope.scope API Reference - $on and API Reference - $emit.

这篇关于跟踪对象ID创建具有纳克重复元素后正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！