Skip to main content
SimilarExport ZIP
100%

Angular directive to hide grandparent of '404' image

✓ Published0🌍 Public
MMattDionis
Last edited May 3, 2015
Created on May 3, 2015

This AngularJS directive automatically hides an image’s grandparent element when the image fails to load. It demonstrates handling the `error` event on an `<img>` tag by navigating two levels up the DOM tree—using `element.parent().parent()`—and setting that ancestor’s `display` to `none`. The code relies on Angular’s `directive` API with `restrict: 'A'` and applies the behavior via the `hide-image` attribute in a sample `ng-repeat` loop over photo objects. The data source is an array of photo objects bound through `ng-repeat` in the sample HTML.

AI-generated description

Similar vizzes

Loading thumbnail…

Angular directive to replace '404' image with default image

This example shows an Angular directive that automatically replaces a broken image with a default fallback image. The `defaultImage` directive binds to the `error` event on an `<img>` element and swaps the `src` attribute to a specified fallback URL when the original image fails to load. The directive uses Angular’s `link` function to attach the event listener, and the sample HTML applies it via the `default-image` attribute alongside `ng-src`, referencing a fallback URL from Instagram’s anonymous user profile. The implementation relies solely on Angular’s directive API and native DOM events.

MMattDionis
72% match
Loading thumbnail…

Angular Directive to Repeat without *ngFor (Useful when wanting to print multiple times without array)

This Angular directive demonstrates a custom structural directive for repeating embedded content without an array, using `ngRepeat` as an input that takes an iteration count. It clears the `ViewContainerRef` and loops to create embedded views from the provided `TemplateRef`, effectively rendering the same template multiple times. This approach is useful for generating repeated UI elements, such as placeholders or static prints, when an array is unnecessary. The code relies on Angular's `Directive`, `Input`, `TemplateRef`, and `ViewContainerRef` APIs.

PPedroPovedaQ
52% match
Loading thumbnail…

Gist 8019475

This example demonstrates an AngularJS directive that integrates the Marked library to render Markdown text as HTML. The directive supports both static content and dynamic bindings, dynamically updating the output when the bound value changes. It can be applied as an attribute or element, accepts optional configuration options through the `opts` attribute, and enables file inclusion via Angular's built-in `ng-include` directive. The code defines an Angular module named `marked` and uses dependency injection for the Marked library and HTTP service.

HHypercubed
50% match
Loading thumbnail…

Improved angularjs markdown provider/filter/directive

This example demonstrates an AngularJS provider, filter, and directive that render Markdown into HTML. It uses the Showdown converter to process text, with a provider that allows configuring default options, such as enabling GitHub-flavored extensions. The filter and directive both invoke `makeHtml` to transform input, while the directive supports binding to scope elements, external files via `ng-include`, and attribute-based text or options. The code also includes a filter that applies the converter to any AngularJS expression, showcasing a reusable approach for embedding Markdown content in views.

HHypercubed
48% match
Loading thumbnail…

d3-indented-tree API example #30

This example demonstrates how to disable node images in an indented tree chart, resulting in a clean, text-only hierarchical layout. It uses the d3-indented-tree API with D3 v6, calling `nodeImageSelection(false)` to omit image elements. The chart renders chess move data from an embedded `<aside>` element, with link width mapped to a "time" property and a fixed link height of 30 pixels. The tree is drawn into a `div` using the `d3.indentedTree` constructor and a custom `showChart` function.

EEE2dev
47% match
Loading thumbnail…

Directive-less ng-pageslide

A slide-out panel demonstrates Angular's dynamic class binding for a directive-less page slide. The example uses an HTML div with the classes `ng-pageslide` and `ng-pageslide-left`, toggling an `open` class via `ng-class` based on the `panels.state` variable. The accompanying CSS defines smooth transitions for width and height properties, expanding the panel to 350px wide from the left edge over 0.5 seconds. The code relies on Angular's built-in `ng-class` directive and CSS3 transitions, with the content inside the panel becoming visible only when the `open` class is applied.

HHypercubed
47% match
Loading thumbnail…

A simple DOM component (for angular and angular-ecs)

This example shows how to wrap raw DOM elements as AngularJS jqLite objects, enabling Angular-ECS components to manipulate them with familiar jQuery-like methods. It detects the browser’s CSS vendor prefix via `window.getComputedStyle` and regular expressions, then uses that prefix to set the `transform` property with `translate3d` for efficient GPU-accelerated positioning. The `Dom` class extends `angular.element`, allowing direct style changes through a custom `setPosition` method, while the prefix detection ensures cross-browser compatibility. The code relies on Angular’s built-in jqLite and demonstrates a lightweight alternative to heavier DOM abstraction libraries.

HHypercubed
46% match
Loading thumbnail…

Use systemjs/plugin-text to import html directly to $routeProvider or $templateCache, works great with jspm bundle.

This example shows how to load HTML templates as AngularJS module dependencies using SystemJS’s text plugin, avoiding separate HTTP requests. The code demonstrates three approaches: a directive’s `template` property, `$templateCache.put` for reuse, and `$routeProvider.when` for route-specific templates. Each snippet imports the template string via `import somethingHTML from './something.html!text'`, which SystemJS resolves at build time. The examples rely on AngularJS’s dependency injection and SystemJS’s bundle-friendly module loading, making templates directly available in the application’s JavaScript bundle.

HHypercubed
46% match