Giter Club home page Giter Club logo

angular-bind-html-compile's Introduction

angular-bind-html-compile

This repo contains a bower package that provides an angular directive which can be passed trusted html with angular template content to evaluate.

The bind-html-compile directive allows for HTML containing directives to be compiled.

You should only use this directive where the content is coming from a trusted source.

Install

Install via bower

  • bower install angular-bind-html-compile

Add dependency to your app module

  • 'angular-bind-html-compile'

Usage

ng-bind-html:

<div ng-bind-html="data.content"></div>

If the data.content contained a directive, it would not be compiled.

bind-html-compile:

<div bind-html-compile="data.content"></div>

NB: Remember to add 'angular-bind-html-compile' to app module requirements. app.js:

var myAppModule = angular.module('myApp', ['angular-bind-html-compile']);

Development

  • Contributions welcome - Create an issue to discuss proposed changes and additions
  • All contributions should be done in branches and submitted as pull requests.
  • Code style follows the jsHint and jscs rules in .jshintrc and jscsrc. Automated travis tests will fail if these are not adhered to.

Releasing a new version

  1. Commit your changes.
  2. Follow the guidelines at http://semver.org/ to determine your new version number.
  3. Update CHANGELOG.md with your new version number and a description of changes.
  4. Update the version property in bower.json and package.json
  5. Commit those changes with the commit message "Bump to [version number]". [version number] should be in the format x.y.z.
  6. git tag [version number]
  7. git push
  8. git push --tags - must be done separately.

angular-bind-html-compile's People

Contributors

eroux avatar filipesilva avatar grahamgilchrist avatar henrahmagix avatar jakobovski avatar marksyzm avatar perry avatar simon-wicki avatar sktifa avatar uminily avatar zwacky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-bind-html-compile's Issues

Support for sending scope

My use case for this directive (displaying editable templates) requires the use of a specific isolate scope when compiling the template.

Since it's extra functionality that does not (I hope) affect the current functionality, I made a PR for it (#2).

Submit to npmjs

Please submit your code to npmjs.org as "angular-bind-html-compile"

Simply do:

mkdir angular-bind-html-compile
cd angular-bind-html-compile
npm init
# work your magic…
npm publish

I would do it but don't want to take credit for all of your work. 👍

Selective Compiling via another directive

Hello,
at first I have to say that this directive really helped me during my project!
But at the moment I am trying to realize two bindings on the same page, the only problem I have with this is, that each time I change the content of one of them, both will compile and therefore a ng-repeat repeats a second time, which is not applicable for my case.

Is there any workaround for this scenario?
I could imagine a second directive with a boolean value where you can dynamically change if the binding has to be compiled or not.

Odd comment doesn't match code logic

If this is a case that only happens some of the time, then why does the code always call the - toString - method? And if - value - is "falsey" (e.g. an empty string, 0, null, etc.) then it will be passed to the - html - method (which sets the innerHTML property of the element)?

The intent of the code is just not clear. For example, what is allowed for the - value - argument? For another, what is supposed to happen if it is a disallowed value (e.g. assume that setting the innerHTML property to "null" is not intended). The comment isn't helping either; if anything, it makes the intent less clear.

// In case value is a TrustedValueHolderType, sometimes it
// needs to be explicitly called into a string in order to
// get the HTML string.

element.html(value && value.toString());

Add JSHint, JSCS and grunt tests with travis

This repo currently has no tests and no code style.

  • Add a gruntfile
  • Add grunt-jscs and grunt-contrib-jshint packages
  • Add .jshintrc and .jscs code style files (see other incuna repos)
  • Add a grunt test task to run the above two tasks
  • Add a travis.yml file to install and run grunt test as part of pull requests

SUGGESTION: Template-url

Hi guys,
Thanks for the good job you did!
Can you extend the directive to support template-url="myUrlValue", it will be really useful!

Thanks in advance!

Does not work with ngRepeat

When using on or inside an element with ngRepeat, this can trigger the following error:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Not deleting scopes

I faced an issue related to not destroying the scope related to the elements implementing new directives.

I think that i can make a plunkr about that but as basis when you have a directive inside the markup compiled and you change whole html text directive will be created again and will not be destroyed properly.

Related PR: #27

bower requirement for angular 1.2

I tried to install your package through bower on a platform with a recent angular, it was impossible due to the requirement of angular ~1.2 in this project's bower.json. Why such an outdated requirement?

Remove window reference

Found this thing in my current project and couldn't help but wonder why the window object was referenced. Just pass a reference to the global - angular - variable. Better yet, just reference it as it is a global. The window object shouldn't enter into it.

Recursive use of bind-html-compile request

First, thanks to all who have worked on this directive! I works like a charm.

I need to use this in a recursive manner. I am building a table from several data sets and would like to use bind-html-compile in both the 'root' html form, but also in the created forms created by the function serviced by the directive. As an example the 'buildRow' function calls 'buildDetail', each of which requires angular data binding

index.html:

buildRow = function() {
return "{{fooBar}}
}

buildDetail = function() {
return "

{{item}}
";
}

Allow to retrieve scope as argument

In order to manage $watch and other angular scope stuff on bind html compile call, is it possible to add calling scope as function argument ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.