sbosell

angular.module('dw.controllers', ['dw.services']).
    controller('AppController', ['$rootScope', '$scope', '$location', '$routeParams', 'contentService', function ($rootScope, $scope, $location, $routeParams, contentService) {
 
        $rootScope.safeApply = function (fn) {
            var phase = this.$root.$$phase;
            if (phase == '$apply' || phase == '$digest') {
                if (fn && (typeof (fn) === 'function')) {
                    fn();
                }
            } else {

sbosell

//
app.controller('RouteController', ['$scope', 'PublishedContent', '$sce', 'contentService', function ($scope, PublishedContent, $sce, contentService) {
        // we set the content to be the published content.  Now the view has access to all of its properties.
        $scope.content = PublishedContent;

        $scope.html = function (s) {
            return $sce.trustAsHtml(s);
        }
     
}]);

sbosell

@inherits Umbraco.Web.Mvc.UmbracoViewPage<AngRenderModel>
@{
    Layout = Model.isApp ? "Blank.cshtml" : "Static.cshtml";
}

@section Content {
    @if(Model.isApp) {
        
            <div ng-bind-html="html(content.body)"></div>
            <img umb-media="content.Properties.image.DataValue" />

sbosell

angular.module('darkweekend', ['ngRoute', 'ngAnimate', 'ui.router', 'dw.controllers', 'dw.services'])
    .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function ($urlRouterProvider, $stateProvider, $locationProvider) {

        //$urlRouterProvider.otherwise("/ab"); $locationProvider.html5Mode(true);
        $locationProvider.html5Mode(true);
        $stateProvider
              .state("home", {
                  url: "*path",
                  templateProvider: function (templateService, contentService, $q, $stateParams) {
                      var d = $q.defer();

sbosell

<input data-bind='value: video' /> <button data-bind="click: addThumbnail">Agregar</button>
        <br /> Hacer clic en el imagen para lanzar el video        
     
      <div class='vids' data-bind='foreach:{data:videos, as: "video"}'>
        <div >         
          <a  data-bind='attr: {href: videoUrl}'><h2 data-bind='text: videoTitle'></h2></a>
          <img  class='' data-bind='vimeoThumb: $data' />
          <input data-bind='value: tempId' />
          <button data-bind='click: changeVideo, with: video'>Actualizar</button>     
        </div>  

sbosell

ko.bindingHandlers.vimeoThumb = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      // comenzar con loading gif
       $(element).attr('src', 'http://pmglima.com/images/ajax-loader.gif');
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      // valueAccessor es el objeto
      var koValue = valueAccessor();
  
      // queremos ver si videoUrl es defined o no

sbosell

function Video(id) {
  var self = this;
  
  self._videoId = ko.observable(id); 
  self.videoUrl = ko.observable();
  self.videoTitle = ko.observable();
  self.isLoaded = ko.observable(false);
  
  self.tempId = ko.observable();
  

sbosell

function VideoViewModel() {
  var self = this;
  
  // array de videos
  self.videos = ko.observableArray();
  
  // el input
  self.video = ko.observable(0);
  
  // funciona agregar un nuevo

sbosell

var vimeoApi =  (function($) {
  var self = this;
  
  self.getThumbnail =  function(id, callback) {
  
    return $.getJSON('http://vimeo.com/api/v2/video/' + id + '.json?callback=?');
  };

  return this;
  

sbosell

app.directive('vimeothumb', function (Vimeo) {
    return {
        restrict: 'AC',

        link: function (scope, element, attrs) {
            element.attr('src', 'http://pmglima.com/images/ajax-loader.gif');
            var vimeoCode = attrs.vimeothumb;
            Vimeo.cargarImagen(vimeoCode).then(function (data) {
                $(element).attr('src', data[2]);
                $(element).one('click', function (e) {