Skip to main content
100%

JS Bin

✓ Published0🌍 Public
Aali-bugdayci
Last edited Dec 18, 2014
Created on Dec 18, 2014

This example demonstrates how AngularJS one-time bindings (`::`) reduce the number of active watchers in a scope. It shows a live counter of watchers that updates every 100 milliseconds via `$interval`, while the user can toggle watching and assign values to see the effect on watcher count. The code uses AngularJS 1.3.2, with a custom `countWatchers` function that traverses the DOM with `angular.element` and `element.data()` to inspect `$$watchers` on each scope. The display updates dynamically, revealing that one-time bindings prevent additional watchers from being created.

AI-generated description

Similar vizzes

Loading thumbnail…

JS Bin

This example demonstrates how AngularJS 1.3’s one-time binding syntax (`::`) reduces the number of active watchers in a scope. It shows a live counter of watchers that updates every 100 milliseconds via `$interval`, while two sets of five value spans are conditionally rendered with `ng-if`. Clicking “Assign values” populates the values, and clicking “Stop Watching” switches the display to one-time bindings, causing the watcher count to drop. The code uses AngularJS’s `$scope`, `ng-click`, and `ng-init` to manage state and manually traverses the DOM to count watchers.

Aali-bugdayci
95% match
Loading thumbnail…

JS Bin

This example demonstrates a live counter that updates every second, displaying the number of elapsed seconds in the browser and the console. It uses RxJS’s `Observable.timer` to emit sequential integers, which are mapped to formatted strings. The resulting data stream is subscribed to by two effects: a DOM effect that writes the text into a `#app` container, and a console effect that logs each message. The code separates the main data stream from its side effects, following a simple functional reactive programming pattern.

JJaxonDvl
66% match
Loading thumbnail…

bookmarklet

This bookmarklet overlays a small, always-on-top widget on any web page, displaying two live performance metrics: AngularJS watcher counts and digest timings. The widget presents each metric as a scrolling bar chart, paired with a numerical readout showing the current, minimum, and maximum values. A click toggles the display between the two metrics. The code tracks AngularJS scope watchers and digest execution time by intercepting the `$digest` function, styling the graphs with inline CSS and updating them on every digest cycle.

CColinEberhardt
65% match
Loading thumbnail…

anotador (angular.js)

This example demonstrates AngularJS data binding through two interactive HTML pages. The first page shows text input with live `ng-model` and `ng-bind` synchronization, arithmetic expression evaluation, and `ng-init` variable assignment, including HTML5-compatible `data-` prefixed directives. The second page calculates Body Mass Index (BMI) from user-entered weight and height values using an inline expression that divides weight by squared height in meters, displaying the result with `{{ }}` interpolation. The code references AngularJS 1.2.15 and 1.3.0-beta.5 from Google-hosted sources, with static text explaining BMI categories.

Aaaizemberg
59% match
Loading thumbnail…

Todo

A functional todo-list interface demonstrates AngularJS 1.5.6 component architecture and two-way data binding. The component uses `ng-model` to capture input, `ng-click` to trigger an `addTodo` controller method that pushes entries into a `todos` array, and `ng-repeat` to render each item as a list element. The `| json` filter displays the array's live state in the `<pre>` block, showing how AngularJS updates the view from controller state without manual DOM manipulation.

JJ6K
58% match
Loading thumbnail…

Sketch for a 'watch' function on d3 selctions...

A prototype demonstrates a custom `watch` method on D3 selections, using `d3.timer` to continuously synchronize SVG circles with a sliding window of random data. The data array holds up to ten points, replacing one every 100 milliseconds. The example calls `svg.selectAll('circle').watch(data, key)`, then chains declarative `enter().append('circle')`, `exit().remove()`, and `attr`/`style` commands, which the watch API re-applies on each timer tick. It shows how to abstract the enter-update-exit pattern into a reusable, animation-friendly wrapper.

RRandomEtc
57% match
Loading thumbnail…

Gist 8420680

This example demonstrates a simple text-input binding pattern, showing a hard-coded value on the left that changes to an AngularJS two-way bound model on the right. The code uses AngularJS’s `ng-model` directive to connect an input field directly to a property on the current booking object, while the left input uses a static template expression with `{{ }}` that displays the same value without updating it. The transition highlights how `ng-model` enables live synchronization between the view and the underlying data model, whereas the plain interpolation only renders the initial value. No external visualization libraries are used; the example focuses on AngularJS’s data-binding mechanics.

Aandybak
56% match
Loading thumbnail…

Gist 518525

This example visualizes the JavaScript events bound to elements on a page, showing their frequency and the element types they target. It uses jQuery’s `.data(‘events’)` to inspect registered handlers, then binds a global listener to all those event types via `.bind()` on the `html` element. As events fire, the code increments per-event and aggregate counts, logging each target’s `nodeName` into arrays for later analysis. The underlying data comes from live user interactions on the rendered DOM, providing a real-time snapshot of event activity without any external dataset.

DDylanFM
55% match