I am trying to generate thumbnails using angular-thumbnails (https://github.com/aztech-digital/angular-thumbnails) from local video files instead of video urls, this is what I have so far, it only works with some videos: https://plnkr.co/edit/j7LR7FU0itRmPmLJWgwT?p=preview
var app = angular.module('plunker', ['angular-thumbnails']);
app.controller('MainCtrl', function($scope) {
$scope.$watch('myFile', function(newVal, oldVal) {
var reader = new FileReader();
reader.addEventListener('load', function() {
$scope.myVideoData = reader.result;
console.log('myVideoData', $scope.myVideoData);
}, false);
if (newVal) {
reader.readAsDataURL(newVal);
}
});
});
app.directive('fileModel', function() {
return {
restrict: 'A',
scope: {
fileModel: '='
},
link: function(scope, element, attrs) {
element.bind('change', function(e) {
scope.$apply(function() {
scope.fileModel = e.target.files[0];
});
});
}
};
});
Related
I'm facing a problem to load a html5 media player to play audio (OGG) file from a link firebase.
Here's my view
<my-audio>
<audio>
<source id="lol" ng-src="{{msg.text}}" />
</audio>
<button class="play">Play Music</button>
<button class="pause">Pause Music</button>
</my-audio>
Here's my directive
angular.module('myApp')
.directive('myAudio', function() {
return {
restrict: 'E',
link: function(scope, element, attr) {
var player = element.children('.player')[0];
element.children('.play').on('click', function() {
player.play();
});
element.children('.pause').on('click', function() {
player.pause();
});
}
};
});
{{msg.text}} comes from a firebase link, example:
https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9
The problem is on how you select the elements by class, according to angular.element docs, .children() doesn't support selector, therefore you have to select them in a different way.
For example:
var $playBtn = angular.element(element[0].getElementsByClassName('play'));
I've made an example using a static Audio object to exemplify:
angular.module('myApp', [])
.directive('myAudio', function() {
return {
restrict: 'E',
link: function(scope, element, attr) {
// Using a static Audio object
var player = new Audio('https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9');
var elm = element[0],
byClass = function(klass) {
return angular.element(elm.getElementsByClassName(klass));
};
byClass('play')
.on('click', function() {
player.play();
});
byClass('pause')
.on('click', function() {
player.pause();
});
}
};
});
angular.element(function() {
angular.bootstrap(document, ['myApp']);
});
<my-audio>
<button class="play">Play Music</button>
<button class="pause">Pause Music</button>
</my-audio>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
UPDATE Added example using html <audio> tag.
angular.module('myApp', [])
.directive('myAudio', function() {
return {
restrict: 'E',
link: function(scope, element, attr) {
// Using html <audio> tag with controlls
var player = element.find('audio')[0];
var elm = element[0],
byClass = function(klass) {
return angular.element(elm.getElementsByClassName(klass));
};
byClass('play')
.on('click', function() {
player.play();
});
byClass('pause')
.on('click', function() {
player.pause();
});
}
};
});
angular.element(function() {
angular.bootstrap(document, ['myApp']);
});
<my-audio>
<audio src="https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9" controls></audio>
<button class="play">Play Music</button>
<button class="pause">Pause Music</button>
</my-audio>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
I am facing the problem of data binding from controller to directive because of delay in response from the server.
To better understand just see a small program below.When I remove the timeout function, binding happens.
<msg track="{{customer}}"></msg>
angular.module('myApp').directive('msg', function() {
return {
scope: {
track :"#"
},
link : function(scope, element, attrs) {
},
template : "<a href>{{track}}</a>"
}
});
angular.module('myApp').controller('HomeCtrl', ['$scope', function($scope) {
setTimeout(function() {
$scope.customer = "shreyansh";
}, 5000);
// assume some service call inside controller
// service1.getData().then(function(data){$scope.customer = data})
}]);
How can i fix above problem so that above code should render as
<msg track="shreyansh" class="ng-isolate-scope">shreyansh</msg>.
Any help is appreciated.
Thanks
var app = angular.module('plunker', []);
app.factory('myService', function($http) {
var promise;
var myService = {
getData: function() {
if (!promise) {
promise = $http.get('test.json').then(function(response) {
return response.data;
});
}
return promise;
}
};
return myService;
});
app.controller('MainCtrl', function(myService, $scope) {
myService.getData().then(function(d) {
$scope.data = d;
});
});
app.directive('msg', function() {
return {
restrict: 'E',
scope: {
track: "#"
},
link: function(scope, element, attrs) {
},
template: "<a href>{{track}}</a>"
}
});
<msg track="{{data.name}}"></msg>
test.json file
{
"name": "Pete"
}
I have the following Directive
.directive("myContainer", function (myContainerService,$window) {
return {
restrict: 'A',
templateUrl: "myContainer/MyContainer.tpl.html",
controller: 'myCtrl',
controllerAs: 'myCtrl',
scope: {
items: '='
},
link: function (scope, element) {
var timeout;
scope.$watch('myCtrl.items', function (items) {
var windowWidth = $window.innerWidth - 65;
window.clearTimeout(timeout);
timeout = window.setTimeout(function () {
myContainerService.saveItems(items);
}, 1000);
}, true);
}
};
})
And here is the Unit Test i have.
describe("myCtrl", function(){
var myCtrl;
var dirEle ;
var myScope;
// var to store the Mock Items
var myContainerService = $injector.get('myContainerService');
var items = [..]
beforeEach(inject(function($compile, $httpBackend){
$httpBackend.whenGET(/.*my-app\/restful-services\/items*./).respond({...});
scope.items = myContainerService.getItems();
dirEle = $compile('<div my-container items="items"></div>')(scope);
scope.$digest();
myScope = dirEle.isolateScope();
myCtrl = myScope.myCtrl;
}));
fit("Saving Items", inject(function($timeout){
spyOn(myContainerService, 'saveItems');
//$timeout.flush();
myScope.$digest();
$timeout.flush();
expect(myContainerService.saveItems).toHaveBeenCalledWith(myCtrl.items);
}));
});
And my test is failing as the saveItems is not getting called at all. Not sure what i am doing wrong.
Appreciate any inputs.
Thanks
You need to be using angulars $timeout that way in your test your $timeout.flush() will work:
.directive("myContainer", function (myContainerService,$window, $timeout) {
return {
restrict: 'A',
templateUrl: "myContainer/MyContainer.tpl.html",
controller: 'myCtrl',
controllerAs: 'myCtrl',
scope: {
items: '='
},
link: function (scope, element) {
var timeout;
scope.$watch('myCtrl.items', function (items) {
var windowWidth = $window.innerWidth - 65;
$timeout.cancel(timeout);
timeout = $timeout(function () {
myContainerService.saveItems(items);
}, 1000);
}, true);
}
};
})
I modified the code found here:
http://jsfiddle.net/jaredwilli/SfJ8c/
var App = angular.module('App', []);
App.directive('resize', function ($window) {
return {
//restrict: 'A',
scope: {},
link: function(scope, element) {
var w = angular.element($window);
alert('Rezise');
w.bind('resize', function() {
scope.$apply();
});
}
};
});
This does not work when the browser windows is resized only refreshed...what am I missing?
I'm trying to pass a value to a directive. The directive is used to integrate a jquery plugin Knob
JSFIDDLE: http://jsfiddle.net/Tropicalista/TH87t/93/
I have this code:
var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
$scope.number = 24;
})
App.directive('knob', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).knob().val(scope.number);
console.log(attrs)
}
};
});
The problem is that knob() doesn't return the element. Use this instead:
link: function(scope, element, attrs) {
$(element).val(scope.number).knob();
}
Here's your fiddle: http://jsfiddle.net/TH87t/94/
I used your question as reference for a fully bi-direction binding. For a working version with angular 1.2.1 see http://jsfiddle.net/sander_van_dam/m5YJu/
App.directive('knob', function() {
return {
require: 'ngModel',
scope: { model: '=ngModel' },
controller: function($scope, $element, $timeout) {
var el = $($element);
$scope.$watch('model', function(v) {
var el = $($element);
el.val(v).trigger('change');
});
},
link: function($scope, $element, $attrs,$ngModel) {
var el = $($element);
el.val($scope.value).knob(
{
'change' : function (v) {
$scope.$apply(function () {
$ngModel.$setViewValue(v);
});
}
}
);
}
}
});