Angular directive to replace '404' image with default image

100%

Angular directive to replace '404' image with default image

✓ Published0🌍 Public

Last edited May 3, 2015

Created on May 3, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Angular directive to hide grandparent of '404' image

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.

MMattDionis

72% 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

53% 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

53% 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

48% match

Loading thumbnail…

NavHeader For bootstrap4

This example demonstrates a configurable navigation header component built with Angular and Bootstrap 4, displaying a logo, brand name, menu items with optional dropdowns, and a search form. The template uses Angular structural directives like *ngIf and *ngFor to conditionally render each element based on the configData object, which also supplies the logo URL, brand text, menu titles, and submenu items. Navigation buttons use the [routerLink] directive for client-side routing, while dropdowns rely on ngbDropdown from the ng-bootstrap library. Click events (logoButtonClick, menuButtonClick, submenuButtonClick, searchButtonClick) and two-way data binding via [(ngModel)] handle user interaction.

OOhtsu

47% match

Loading thumbnail…

NavBar sample based on ng-bootstrap

This example shows a responsive navigation bar built with Bootstrap 4 and Angular, using the `ngbDropdown` and `ngbDropdownToggle` directives from ng-bootstrap to handle the dropdown menu. The navbar collapses at the medium (`md`) breakpoint, displaying a toggle button for smaller screens. It includes a left-aligned list of links (Home, Link, Disabled, Dropdown) and a right-aligned search form, styled with Bootstrap’s `navbar-dark` and `bg-dark` classes. The markup relies on standard Bootstrap collapse behavior and Angular event binding for the dropdown, with no custom JavaScript or data manipulation.

OOhtsu

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…

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

45% match