2

¿Sera buena está directiva para implementar Disqus en mi aplicación web con AngularJS? ¿Existe alguna forma mejor de implementarlo?

Si no existe otra forma por favor pueden darme un ejemplo de cómo implementar la directiva ya mencionada.

2 respuestas 2

0

Una forma de saber cuando una directiva es buena en Github es mirando el número de estrellas / forks / watchs que tiene.

estrellas de la directiva

Mientras más alto el número más probabilidades tienes de que sea buena. Esto no es del todo confiable pero te dá una buena idea del nivel de "soporte de la comunidad" que tiene y las probabilidades que te vaya bien usandola. En lo personal me he encontrado con directivas muy buenas que tienen bugs muy molestos que me han obligado a usar alternativas así que realmente la única forma de saberlo es probando.

Si quieres un ejemplo aquí te dejo uno. Ten en cuenta que en la documentación especifican bien claro que debes tener el modo html5 activado o usar hashbang #! de lo contrario no funcionará bien.

angular.module('app', ['angularUtils.directives.dirDisqus'])
  .config(function($locationProvider) {
    $locationProvider.hashPrefix('!');
  })
  .controller('DiscusCtrl', function() {
    var vm = this;
    vm.config = {
      disqus_shortname: 'Your disqus shortname',
      disqus_identifier: 'Comments identifier',
      disqus_url: 'Comments url'
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/michaelbromley/angularUtils/master/src/directives/disqus/dirDisqus.js"></script>
<div ng-app="app" ng-controller="DiscusCtrl as vm">
  <dir-disqus config="vm.config"></dir-disqus>
</div>

Esto es todo lo que se necesita para utilizarlo. Puedes chequear más opciones en el repo de github y aquí te dejo otro demo en el que puedes poner tus datos y probarla para decidir si te sirve o no.

angular.module('app', ['angularUtils.directives.dirDisqus'])
  .config(function($locationProvider) {
    $locationProvider.hashPrefix('!');
  })
  .controller('DiscusCtrl', function($scope) {
    var vm = this;
    vm.ready = false;
    vm.config = {
      disqus_on_ready: function() {
        alert('Discus loaded');
      }
    };

    $scope.$watch('vm.config', function() {
      vm.ready = false;
    }, true);

    vm.render = function() {
      vm.ready = true;
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/michaelbromley/angularUtils/master/src/directives/disqus/dirDisqus.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" ng-controller="DiscusCtrl as vm">
  <form name="DisqusCtrl" class="form-horizontal" ng-submit="vm.render()">
    <div class="form-group">
      <label for="shortname" class="col-md-3 control-label">Nombre</label>
      <div class="col-md-9">
        <input id="shortname" class="form-control" name="shortname" ng-model="vm.config.disqus_shortname" required>
      </div>
    </div>
    <div class="form-group">
      <label for="shortname" class="col-md-3 control-label">Identifier</label>
      <div class="col-md-9">
        <input id="identfier" class="form-control" name="identfier" ng-model="vm.config.disqus_identifier" required>
      </div>
    </div>
    <div class="form-group">
      <label for="shortname" class="col-md-3 control-label">Url</label>
      <div class="col-md-9">
        <input id="url" class="form-control" name="url" ng-model="vm.config.disqus_url" required>
      </div>
    </div>
    <div class="form-group">
      <label for="shortname" class="col-md-3 control-label">Api key</label>
      <div class="col-md-9">
        <input id="url" class="form-control" name="url" ng-model="vm.config.disqus_api_key">
      </div>
    </div>
    <button type="submit" class="btn btn-default">Listo</button>
  </form>
  <div ng-if="vm.ready">
    <dir-disqus config="vm.config"></dir-disqus>
  </div>
</div>

4
  • Gracias por responder, cuales datos tengo que colocar en disqus_identifier y disqus_url ? Commented el 27 may. 2016 a las 17:11
  • @AdrianoJosué Imagino que tienes una cuenta de disqus. En el sitio de ellos debes poder encontrar esa información de tu cuenta y reemplazarla en el ejemplo que te pongo.
    – devconcept
    Commented el 27 may. 2016 a las 19:20
  • Saludos! muchas gracias, todo me funciona correctamente. Pero ahora tengo un problema, quiero hacer que disqus_identifier y disqus_title sean dinámicos buscando los datos desde un json, cómo puedo hacerlo? donde estoy implementando Disqus es en una ruta con id que busca los datos de los artículos en un json. también eh colocado window.location.href en disqus_url para hacerlo dinámico. ¿qué opinas? Commented el 5 jun. 2016 a las 6:01
  • Hola @AdrianoJosué para que la directiva te funcione obteniendo una configuración de manera asincrónica debes usar ng-if="vm.configuration" o algo parecido. De esa forma solo se mostrará y compilará la directiva si ya tienes todos los datos necesarios para mostrarla. Aconsejarte como estructurar tu aplicación es dificil pues sólo tu sabes los detalles particulares de esta. Siempre puedes darte una vuelta por el chat y compartir detalles. Creo que ese sería un formato más adecuado.
    – devconcept
    Commented el 5 jun. 2016 a las 14:17
0

Si lo único que buscas es implementar disqus en tu aplicación web con Angularjs, esta es la solución más simple.

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/disqus

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.