I am currently working on a simple app where I want to display embed videos with the click of a button. It was quite challenging for me to dynamically bind my embed players, but I managed to do it successfully.
I created a factory that contains my data in an array form.
These data generate a list of buttons, and when I click on one of these buttons, I want the corresponding player to be displayed. To achieve this, I need to toggle the 'tv' value of the previously displayed video and toggle the one I just clicked.
Controller :
'use strict';
angular.module('myApp')
.controller('MyAppCtrl', function ($scope, datas) {
$scope.awesomeThings = ['HTML5 Boilerplate', 'AngularJS', 'Karma'];
$scope.lives = datas.getLives();
});
Factory :
'use strict';
angular.module('myApp')
.factory('datas', function () {
var factory = {};
var lives = [
{id:'1', title:'title1', tv: 'false', code:'code1'},
{id:'2', title:'title2', tv: 'true', code:'code2'}
];
factory.getLives = function () {
return lives;
};
return factory;
});
Directive for the embed player :
'use strict';
angular.module('myApp')
.directive('dmcloud', function($sce) {
return {
restrict: 'EA',
replace: true,
scope: { code:'=' },
template: '<iframe width="512" height="288" frameborder="0" scrolling="no" ng-src="{{url}}"></iframe>',
link: function (scope) {
scope.$watch('code', function (newVal) {
if (newVal) {
scope.url = $sce.trustAsResourceUrl('http://api.dmcloud.net/player/embed/' + newVal);
}
});
}
};
});
And finally, my view:
<ul>
<li ng-repeat="live in lives">
<input type="submit" ng-click="lives.toogleLive()" value="{{live.title}}">
</li>
</ul>
<h2>TV : </h2>
<div ng-repeat="live in lives | filter:tv = true">
<dmcloud code="live.code"></dmcloud>
</div>I am having trouble finding a clean way to change the appropriate 'tv' value. I am not sure where to place my 'toggleLive()' function. If you have any ideas, I would really appreciate your input. Thank you!