Obj as attributes about angular-highlightjs HOT 6 CLOSED

Hello @fraserxu , nice to see someone using my directive!

So I guess the obj directive you want to add woks like this:

In HTML

<div hljs obj='myObject'></div>

In JavaScript

$scope.myObject = {
  a: 1, b: 2, c:3,
  github: 'yeah'
};

Then the output result will be

{
    "a": 1,
    "b": 2,
    "c": 3,
    "github": "yeah"
}

In my understanding, the obj directive you requested is kind of like automatically prettified JSON with syntax highlight, and if this is correct, then I think the current directive already has the ability to accomplish this (utilizing source directive).

I wrote a demo for you:
http://plnkr.co/edit/WCmBTQ?p=preview

Please let me know if this is not what you want, thanks!

from angular-highlightjs.

Hi @pc035860 Thanks for your reply. I've see your code on plunker.

Maybe I forgot to mention that the object in my template is something like (key, server) in servers from the ng-repeat directive, in this way I don't need to get it in from controllers or other directives and simply can add <div hljs obj='server'></div>.

Not sure mine is a good way or not.

from angular-highlightjs.

Hello @fraserxu , in my consideration, hljs module is more like for general usage and your situation wouldn't fit the case.

Instead of add a new directive into the current hljs module, I suggest you to wrap the original hljs + source with a new directive.
Here's an example, which I wrapped them in a hljs-to-json directive.

angular.module('myApp')
.directive('hljsToJson', [function () {
  return {
    restrict: 'EA',
    scope: {
      obj: '=hljsToJson'
    },
    template: '<div hljs source="prettyJSON"></div>',
    link: function postLink(scope, iElm, iAttrs) {
      var tabWidth = 4;

      scope.prettyJSON = '';

      scope.$watch('obj', function (newObj, oldObj) {

        if (angular.isDefined(newObj) && 
            (newObj === oldObj || !angular.equals(newObj, oldObj))) {

          scope.prettyJSON = JSON.stringify(newObj, null, tabWidth);
        }

      });
    }
  };
}]);

Usage demo (I tried to simulate the situation you described)
http://plnkr.co/edit/xVARtw?p=preview

Hope this might help.

from angular-highlightjs.

Thanks! It works for me now.

But we are now using bower to manage third party libraries. And for your directive, I include it like this in our bower.json file,

{
  "name": "Devopsproto",
  "version": "0.0.1",
  "devDependencies": {
    "angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js",
    "highlightjs": "http://yandex.st/highlightjs/7.3/highlight.min.js",
    "ng-highlightjs": "http://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js",
    "normalize-css": "*",
    "d3": "*",
    "rickshaw": "*",
    "angular-ui-select2": "latest"
  }
}

It would be awesome if you can make it a bower component for easy installation for me and other developers.

BTW, I like your way of writing directive, learned a lot from it.

from angular-highlightjs.

Forgot close. Thanks again. closing..

from angular-highlightjs.

Will support bower! Thank you for the advice. #3

from angular-highlightjs.