Comments (6)
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.
Related Issues (20)
- Electron App: Uncaught Error: Cannot find module 'angular' HOT 3
- Comments added when <?php tags are included in the snippet HOT 1
- Nested hljs HOT 1
- HLJS content rendered event HOT 4
- Allow use of <pre><code> tags instead of <div hljs> HOT 2
- "hljs-source" needs to be changed to "source" in the README HOT 1
- Showing "loading" message HOT 4
- Some blank lines are deleted HOT 6
- use require.js was Error HOT 2
- end element is getting added automatically HOT 1
- There are a compatibility problem with highlight v 9
- Less-than-sign displaying as < HOT 2
- Not working with dynamically pulled data HOT 7
- dependency on highlight.js issue HOT 9
- make editable and set on ngmodel
- How to use with Webpack? HOT 3
- Cant figure out hljs-source HOT 2
- yarn.lock with [email protected] HOT 1
- security issue with dependencies HOT 2
- Command Injection vulnerability found in shelljs dependency HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-highlightjs.