comment puis-je obtenir le calendrier de l'objet avec AngularJS ui-calendrier à l'aide du “controller” de la syntaxe?

Je suis en utilisant l'interface utilisateur de calendrier angulaires-ui. C'est très agréable et facile à utiliser.

Cependant, je ne suis pas en mesure d'obtenir une prise de calendrier de l'objet appeler fullCalendar() et d'exécuter certaines fonctions sur le calendrier.

La documentation ne donne que des exemples d'utilisation de la $scope approche, mais je suis en utilisant le controller as vm approche recommandée par Jean-Papa et les autres. J'ai essayé de l'utiliser de cette façon:

<div data-ng-controller="races as vm">
    <div ui-calendar="vm.calendarConfig" calendar="vm.calendar"></div>
</div>

dans les courses contrôleur j'ai le texte suivant:

vm = this;
vm.calendarConfig = { header: {...} };
vm.calendar = {};

//somewhere else in a separate click event
vm.calendar.fullCalendar('prev');    //---> exception

Que la dernière ligne déclenche une exception Object has no method 'fullCalendar'.

Demandais juste ce que je suis absent et si quelqu'un a un exemple d'utilisation de ui-calendar avec un controller as vm syntaxe.

Ici est la plunker: http://plnkr.co/edit/DPo9meJHx19bREYFLhDh

Pouvez-vous partager votre code?
le code nécessaire est là. Le code est une combinaison de ASP.NET MVC et certaines grandes bootstrap modèles. Totalisant 1000s de lignes. Il serait sans doute confondre les lecteurs plus que de l'aide. Si cela ne va pas tout de traction, je vais essayer de simplifier le problème et l'a mis sur plunker ou quelque chose.
voici la plunker: plnkr.co/modifier/DPo9meJHx19bREYFLhDh
vous disposez d'une expérience dans l'utilisation de l'interface utilisateur-calendrier avec angularJS? Je sais que mon objet n'a pas de fullCalendar méthode. C'est le point de la poste: Comment puis-je passer le "calendrier" de l'objet à mon contrôleur? à partir de la documentation, je devrais être à l'aide du calendrier="xxxx" en option sur la <div>. Cependant, l'utilisation de la machine virtuelle.calendrier de la syntaxe ne semble pas fonctionner.

OriginalL'auteur Eric Liprandi | 2014-03-18

  1. 2

    Grâce Josh Kurz pour votre aide. Voici ce que j'ai fait: j'ai utilisé un hybride de l' $portée et controller as approche.
    En gros, j'ai ajouté une dépendance sur $scope de mon contrôleur. Quand j'ai besoin d'accéder à la véritable contrôle de calendrier, j'utilise $scope.calendar.fullCalendar('...'). Le plunker a été mis à jour, mais ici, c'est de base dans le fichier de script: 

    angular.module('app').controller(controllerId, ['$scope', races];
function races($scope) {
    var vm = this;
    ...
    function next() {
        $scope.calendar.fullCalendar('next');
    }
}

    et dans le html: 

    ...
<div ui-calendar ng-model="vm.eventSources" calendar="calendar"></div>
...

    Pas aussi propre que je le voudrais, mais il semble encore assez propre pour mon but.

    J'ai essayé ça aussi, mais je voulais résoudre le problème sans changer votre code. Mais la bonne chose, mais... mieux vaut changer de contrôleurs que le niveau inférieur des directives.
    j'ai ajouté <div ui-calendrier="uiConfig.calendrier" calendrier="myCalendar1" class="span8 calendrier" ng-model="eventSources"></div> en html mais myCalendar1 n'est pas accessible dans mon contrôleur
    vous avez besoin pour obtenir à partir de l'$, à partir du contrôleur. Aussi garder à l'esprit que ce n'est que quelques mois. Je pense que fullCalendar la libération de ses 2.x version et d'autres peut-être créé un module ou quelque chose...

    OriginalL'auteur Eric Liprandi

  2. 1

    Question intéressante.

    Pour accomplir cela avec votre syntaxe exacte que j'ai eu à pirater le uiCalendar.
    J'ai ajouté une condition qui vérifie la présence d'un contrôleur-comme l'attribut de la directive.
    http://plnkr.co/edit/6Jj0UHD7A8a1v8SRZrYP?p=preview

    <div ui-calendar ng-model="vm.eventSources" controller-as="vm" calendar="calendar"></div>


if(attrs.controllerAs){
  scope.calendar = scope.$parent.$eval(attrs.controllerAs)[attrs.calendar] =  elm.html('');
} else {
  scope.calendar = scope.$parent[attrs.calendar] =  elm.html('');
}

    Pas la plus jolie de la solution, mais il fonctionne. Pas testé non plus, donc les utiliser à votre convenance...

    Je pense que cela pourrait être un RP valide pour le calendrier si plus de gens trouvent qu'il est utile, mais c'est la première demande que j'ai entendu parler de ce type.

    merci pour l'info. Ne vous inquiétez pas à propos de ces changements permanents, sauf si vous obtenez plus de demandes. Je pense que j'ai trouvé une bonne compromis.

    OriginalL'auteur joshkurz

  3. 0

    Mine travaillé après j'ai utilisé le controllerAs dans l'itinéraire, puis ajouter var vm = ce.

    OriginalL'auteur charlchad