如何为angular指令设置单独的链接函数实例?

时间:2016-04-21 23:51:28

标签: javascript angularjs

我有一个指令,它在链接中有一个函数,只要移动指令元素就会触发该函数。在我的链接功能中,我创建了一个随机数。我希望每个指令实例都有自己的randon数值。但无论我移动哪个指令,它们都会随机打印相同的值。我如何给每个指令赋予自己的随机实例。

查看console.log('moving', random);drag: function()..函数内的setPixelSnap

我的指示

'use strict';
var cell_length = 80;
var colors = ['#EF5350', '#7E57C2', '#EC407A', '#42A5F5', '#FFCA28']
var app = angular.module('netJamApp');

/* DIRECTIVE FOR LISTING TRACKS */
app.directive('myClip', ['$rootScope', 'DiffSyncService',
    function($rootScope, DiffSyncService) {
        return {
            restrict: 'E',
            scope: {
                clip: '=',
                ppb: '=',
                project: '=',
                track: '='
            },
            link: function(scope, element, attrs) {
                var random = Math.random() * 100;
                console.log('clip', scope.clip, 'track', scope.track);
                var track = scope.project.tracks[scope.track];
                var clip = track.clips[scope.clip];
                var tracknum = scope.track;
                var clipnum = scope.clip;

                element.css('left', clip.start * cell_length);
                element.css('width', clip.length * cell_length);
                element.css('background', colors[tracknum % colors.length]);

                element.on('mousedown', function() {
                    $(this).removeClass('clip');
                });

                element.on('mouseup', function() {
                    $(this).addClass('clip');
                })

                scope.$watch('project', function() {
                    // track = scope.project.tracks[tracknum];
                    // clip = track.clips[clipnum];
                    // element.css('left', clip.start * cell_length);
                    // element.css('width', clip.length * cell_length);
                    // element.css('background', colors[tracknum % colors.length]);
                }, true);

                // Almost certainly TODO: dynamicaly adjusting the segment after BPM change?
                var trackid = '#track' + (clipnum.tracknum - 1);
                $(function() {
                    var pixels_in_beat = scope.ppb;
                    var setPixelSnap = function(pixels_in_beat) {
                        // console.log('Setting up clip snapping to', pixels_in_beat, 'pixels');
                        $('.draggable').draggable({
                            obstacle: ".clip",
                            preventCollision: false,
                            axis: 'x',
                            snapMode: 'inner',
                            grid: [pixels_in_beat, 0],
                            containment: trackid,
                            scroll: true,
                            drag: function(event, ui) {
                                clip.start = Math.round(ui.position.left / pixels_in_beat);
                                var curr_end = scope.project.clips_end;
                                if (curr_end < clip.start + clip.length) {
                                    scope.project.clips_end = clip.start + clip.length;
                                    $rootScope.$broadcast('update cells per track');
                                }
                                DiffSyncService.update();
                                // console.log(JSON.stringify(scope.project));
                                console.log('moving', random);
                            }
                        });
                    }

                    setPixelSnap(pixels_in_beat);
                })
            }
        };
    }
]);
/* directive for listing tracks */

0 个答案:

没有答案