我有一个指令,它在链接中有一个函数,只要移动指令元素就会触发该函数。在我的链接功能中,我创建了一个随机数。我希望每个指令实例都有自己的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 */