L'Image des cultures avec AngularJS

Je veux permettre à l'utilisateur de rognage d'une image, j'ai trouvé ce plugin JQuery - http://deepliquid.com/content/Jcrop.html

J'ai essayé de l'utiliser avec Angular-ui Jquery option de relais, l'ajout de la ui-jq=Jcrop directive de la <img>

Le problème est que Si j'utilise ng-src pour modifier dynamiquement l'image ne fonctionne pas et rien n'est visible. Si je le change à la src et de mettre une url statique, je peux voir l'image et Jcrop.

comment puis-je régler ce problème ?
aussi, comment puis-je écouter Jcrop de rappels de savoir qu'est-ce que la sélection de l'utilisateur ?

est-il mieux /plus simple pour ajouter un recadrage de l'image de la fonctionnalité AngularJS ?

BTW, Angulaire de l'INTERFACE utilisateur de jQuery Passthru Directive a été déplacé à github.com/angular-ui/ui-utils/tree/master/modules/jq
J'ai mis à jour le plnkr qui montre l'image recadrée ici:plnkr.co/modifier/Iizykd7UORy3po1h5mfm?p=preview. et regarder le post pour plus de détails sur l'utilisation de la directive sur le recadrage de l'image: codage-questions.blogspot.dans/2013/10/...
Je pense qu'il ya une meilleure façon d'ajouter de recadrage de l'image de la fonctionnalité, parce que l'angle de la directive pour Jcrop n'est pas à jour. J'ai écrit un billet de blog sur la comparaison de l'image des cultures directives AngularJS: lingohub.com/blog/2016/03/angularjs-directives-image-cropping

OriginalL'auteur Gal Ben-Haim | 2013-01-14

  1. 9

    Voici ma solution:

    J'ai écrit une directive qui créent de l'élément img et appliquer plugin. Lors de la src est modifié, cette img est supprimé et le contenu qui a été créé par le plugin est également détruits et puis re-créé de nouveaux img avec les nouvelles de la src et de nouveau appliquée en plugin.

    Également fourni 'sélectionné' callback pour être en mesure d'obtenir les coordonnées qui ont été choisis (enveloppé dans $s'appliquent de sorte que vous pouvez modifier les valeurs de portée).

    Vérifier ma solution à Plunker

    si j'utilise votre solution avec setSelect pour JCrop option fait en sorte que Error: $digest already in progress même si j'essaye d'enrouler le scope.$apply déclaration avec if (!scope.$$phase) comment puis-je résoudre ce problème ?
    Pouvez-vous fourche mon Plunker et ajouter de la façon dont vous utilisez setSelect?
    setSelect fonctionne très bien, je suis l'insertion d'une image à partir d'une url qui vous est donné dans un texte de saisie, et j'ai une autre directive sur la zone de texte pour vérifier que l'url est une image. c'est trop confus et de causer des problèmes. comment puis-je ajouter une image de validation de votre directive comme "imageOK" qui permettra de dire si l'url de src est en effet une image. je tiens également à masquer l'élément en cas de son non valide alors que la petite image manquante icône de ne pas s'afficher. Je suis nouveau sur les directives et ses très déroutant moi 🙂
    Je propose de faire d'une façon juste: "lient" url " à l'entrée d'où l'utilisateur peut saisir son url. Puis au contrôleur ajoutée $watch('url',...) et il ne la validation et à succès de la validation de la mise à jour $scope.imageUrl et bing directive imageUrl (pas url)
    J'ai quelques problèmes avec la directive, s'il vous plaît regardez stackoverflow.com/questions/14504393/...

    OriginalL'auteur Valentyn Shybanov

  2. 6

    J'ai construit une démonstration utilisant AngularJS et Jcrop ici:

    Démo: https://coolaj86.github.com/angular-image-crop

    Sur Github: https://github.com/coolaj86/angular-image-crop

    OriginalL'auteur CoolAJ86

  3. 1

    Vous pouvez tirer parti de ui-event de créer un événement définition de l'objet avec les clés de l'événement, les noms et les valeurs des rappels. Ou vous pouvez simplement transmettre ces événements comme des options à Jcrop (selon la documentation)

    Enfin, il est une nouvelle mise à jour venir à ui-jq qui vous permet d'ajouter ui-refresh qui est une expression pour être regardé de re-déclencher le plug-in.

    Théoriquement, vous devriez être en mesure de faire 

    <img ui-jq="Jcrop" 
     ui-options="{onSelect:myCallback}"
     ui-event="{onChange:'myCallback($event)'}"
     ui-refresh="imgSrc"
     ng-src="imgSrc" />

    Remarque: il suffit de re-déclenche le relais de nouveau, et ne veut pas automatiquement dire que cela va résoudre le problème ou que le plugin va se comporter correctement lors de la ré-initialisé

    Nous travaillons toujours sur un bon moyen de vous permettre de déclencher des événements différents à des moments différents.

    Si je comprends bien, l'interface utilisateur-l'actualisation viens de re-feu plugin, en l'appelant de nouveau sur le même élément. Mais il y a beaucoup de plugins qui vont ajouter de nombreux éléments supplémentaires à certains contenus, même en dehors de l'élément source. Par exemple Jcrop plugin va ajouter <div> après <img>. Donc, juste re-cuisson plugin nouveau ne sera pas de mise à jour ou supprimer-ajouter ce contenu dynamique. Personnellement, je ne sais pas, comment le suivi de ce plugin pourrait être fait pour n'importe quel générique plugin...
    C'est un appel que vous avez à faire sur un plugin par plugin de base comme certains plugins simplement mettre à jour ou actualiser.

    OriginalL'auteur ProLoser