Coder Social home page Coder Social logo

angular-bindonceorstatic's Introduction

angular-bindOnceOrStatic

Angular one time binding with the least impact on usual Angular as possible.

What is the problem ?

Each time your doing interpolation ({{foo.bar}}), Angular adds a watcher on this expression in case it will change over time.

For some use cases, watcher is not needed as the value doesn't change.

To avoid watcher on binding, you would have 2 usuals solutions :

None of these solutions are OK for me. I don't want to rewrite for any new project a binding without watcher, I need a module to manage it. Bindonce is also a no go as I don't like the idea of creating new directives, I'd like to stick with usual Angular.

Still, I admit that I have to change the way I work with Angular to get rid of non-wanted watchers.

Introducing angular-bindOnceOrStatic

I like the curly bracket notation ({{foo.bar}}). It is simple. It is something Angular developers are used to.

So to make it clear, I want a tweak for the curly bracket notation =)

A new module

You'll need to add a module to your application :

angular.module('mySuperApp', ["bindOnceOrStatic"]);

A new javascript file

Add this script to your HTML file :

<script src="bower_components/angular-bindOnceOrStatic/dist/angular-bindOnceOrStatic-min.js"></script>

Binding without watcher

We'll use [[foo.bar]] to do binding without watcher (kind of like bindonce does). Unlike bindonce, you can mix your interpolated variable within string, the same way the curly bracket notation allow you to do. The interpolation is done against the scope.

Binding without watcher at view compilation phase

Sometimes, you may want to do interpolation at loading, once and for all. This project allow the use of a dictionary, defined outside any scope. We'll use [[[foo.bar]]] to do binding without watcher at compilation time. The directive will look into the boosDictionary service for a property foo.

If you want to use this feature, you'll need to add information to the dictionary :

angular.module('mySuperApp').config(function (boosDictionaryProvider) {
  // localization is a service containing a subdirectory defined for mySuperApp
  boosDictionaryProvider.add('localization');
});

Why all of this ?

It's been a while that I have this project in mind. Here is the Google+ thread that started the initial bootstrap : https://plus.google.com/117415782545013334199/posts/bABiT5aEEq5

What's next

  • Find a better way to retrieve the initial $interpolateProvider
  • Manage the binding outside attributes (in plain HTML content)

Release History

  • 0.3.0 : initial version

angular-bindonceorstatic's People

Contributors

astik avatar

Watchers

 avatar

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.