New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

angular-picturify

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-picturify

Angular filter, directive, and service to picturify image urls in a text.

0.0.7
latest
Source
npm
Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

angular-picturify

Angular filter, directive, and service to picturify image urls in a text. As of v0.0.3, angular-picturify works for obvious image urls and base64 data. No content-type verification (future versions), only regex checking.

Note: The module uses $sce internally, so it doesn't support 1.2.x and previous versions (it's an one-line change, btw).

Install

npm install angular-picturify --save

Usage

Inject module into your application

//require('angular.picturify'); for browserify/webpack
//or
//<script src="node_modules/angular-picturify/dist/angular.picturify.js"></script>
angular.module('YourApp', ['picturify']);

Use as a AngularJS Filter

<!-- As a filer -->
<div ng-bind-html="someModel | picturify"></div>
<!-- As a filter, with opts -->
<div ng-bind-html="someModel | picturify:'_blank':'chat-img':3"></div>
<!-- target="_blank" class="chat-img" -->
<div ng-bind-html="someModel | picturify:'_parent':200:3"></div>
<!-- target="_parent" width="200" -->

Use as a AngularJS Directive

<!-- As a directive -->
<div ng-bind="someModel" picturify></div>

<!-- As a directive, with opts -->
<div ng-bind="someModel" picturify="{class: 'chat-img', amount: 2, target: '_blank'}"></div>

Inject as a AngularJS Service

// Injected into controller
angular.module('someModule').controller('SomeCtrl', function ($scope, picturify) {
  var text = "https://angularjs.org/img/AngularJS-large.png";

  $scope.text = picturify.filter(text));
  // outputs: <a href="https://angularjs.org/img/AngularJS-large.png" target="_blank"><img src="https://angularjs.org/img/AngularJS-large.png"/></a>

});

Note

  • The first parameter sets the target. Defaults to '_blank'.
  • The second sets the class/width*.
  • The third sets the max amount of images to be rendered. Defaults to 0, which renders all images.

*The disambiguation lies on a simple 'string or number' verification

Build

npm install && npm run webpack

Keywords

angular

FAQs

Package last updated on 16 Nov 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts