directive | 易学教程

ANGULAR 4 Base64 Upload Component

阅读更多关于 ANGULAR 4 Base64 Upload Component

问题 I am new to Angular. I am using Angular 4. Where there is a requirement to send the base64 Image as one of the model member to the web api. Is there a Angular component or directive for the that would bind the base64 to the said model? Appreciate and Thank you for the help. 回答1: You can upload image and store it as base64 encoded. In your template add this <div class="image-upload"> <img [src]="imageSrc" style="max-width:300px;max-height:300px"/> <input name="imageUrl" type="file" accept=

AngularJS：何时应该使用Directive、Controller、Service？

阅读更多关于 AngularJS：何时应该使用Directive、Controller、Service？

AngularJS：何时应该使用Directive、Controller、Service？ AngularJS是一款非常强大的前端 MVC框架。同时，它也引入了相当多的概念，这些概念我们可能不是太熟悉。（译者注：老外真谦虚，我大天朝的码农对这些概念那是相当熟悉啊！）这些概念有：Directive（指令） Controller（控制器） Service （服务）下面我们逐个来看这些概念，研究一下为什么它们会像当初设计的那样强大，同时研究一下为什么我们要以那样的方式去使用它们。我们从Service开始。 SERVICES（服务）如果你已经使用过 AngularJS ，你可能已经遇到过Service这个概念了，简而言之，Service就是【单例对象】在AngluarJS 中的一个别名。这些小东西（指单例对象）会被经常传来传去，保证你每次访问到的都是同一个实例，这一点和工厂模式不同。基于这种思想，单例对象让我们可以实现一些相当酷的功能，它可以让很多controller和directive访问内部的数值。在#angularjs 频道（译者注：指的是原作者自己的博客频道）里面这也是非常常见的问题之一，那就是在应用中的不同代码块之间如何共享数据？我们来看这个问题。我们首先来创建一个module（模块），本文中的所有代码都会用到这个module。 var module =

Reusable Angular Material Dialog and Toast for Information Helper and Alert

阅读更多关于 Reusable Angular Material Dialog and Toast for Information Helper and Alert

I needed to use an suitable alert and helper for my project and found angular material to be awesome. However instead of pasting in the few lines in each controller because I needed to reuse them. I needed to set these up as a factory so I can call them from any controller. I find them very helpful might be of use to someone. Alert (function () { 'use strict'; app.factory("showAlert", ["$mdDialog", function ($mdDialog) { return function (title, content, ev) { $mdDialog.show( $mdDialog.alert() .parent(angular.element(document.querySelector('#popupContainer'))) .clickOutsideToClose(true) .title

angular js中的directive

阅读更多关于 angular js中的directive

angular js中的自定义指令自定义指令return如下指令定义对象： restrict:restrict约束自定义指令的使用形式，取值有A（属性），E（元素），C（类），M（注释） template:该属性指定angular js指令被替换为html模板 scope:scope:true 表示创建一个作用域，该作用域继承于父作用域（即ng-controller控制的作用域）， scope:{} 创建一个完全孤立的作用域，不会继承父作用域的任何数据 scope:{"@"} 创建一个单向绑定的作用域，改变父作用域的数据会改变子作用域的数据，改变子作用域的数据不会改变父作用域的数据 scope:{"="} 创建一个双向绑定的子作用域 scope:{"&"} 创建一个与父作用域方法进行绑定的子作用域 controller:该属性用于指令之间的通信，在一个指令中定义方法和属性，以供其他的指令进行调用 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>复习directive</title> <script type="text/javascript" src="../js/angular.js"></script> </head> <body ng-controller=

Format currency input in angular 2

阅读更多关于 Format currency input in angular 2

问题 I want to format input to USD currency as you type. The input will have 2 decimal places and will enter from right to left. Suppose if I type 54.60 it will be entered as $0.05-->$0.54-->$5.46-->$54.60. This PLUNKER exactly does this, but its in angular js. So far my directive looks like: import {Directive, Output, EventEmitter} from '@angular/core'; import {NgControl} from '@angular/forms'; @Directive({ selector: '[formControlName][currency]', host: { '(ngModelChange)': 'onInputChange($event)

jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive

阅读更多关于 jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive

I am trying to bring jQuery Sparkline at each row in one cell in ng-grid. The column contains numeric array data. Plunkr --> http://plnkr.co/edit/1eNEcx6FQWcJynlVYvFw?p=preview I am using directive with cell template to achieve this. Cell Template: Directive: app.directive('ngAge', function() { return{ restrict: 'C', replace: true, translude: true, scope: {ngAgeData: '@'}, template: '<div>' + '<div class="sparklines"></div>' + '</div>', link: function(scope,element,attrs){ // var arrvalue= "3386.24000,1107.04000,3418.80000,3353.68000,4232.80000,3874.64000,3483.92000,2735.04000,2474.56000,3288

The load sequence difference between template and templateUrl in angular directive

阅读更多关于 The load sequence difference between template and templateUrl in angular directive

问题 We were facing this issue several days before. At that time, we were introducing Angular into our HTML5 based mobile family photo social application Family Snap. It's maintained by www.uhella.com. During the restructure, I moved the dojo code into directive inline, it works well. The calendar_month_datepicker (dojox.mobile.SpinWheelDatePicker) was successfully injected by dijit to be a huge Div then. After that, I want to separate it into individual html file as template, because html editor

Close nested UI Bootstrap accordion when parent closes

阅读更多关于 Close nested UI Bootstrap accordion when parent closes

In AngularJS I am using a bootstrapUI accordion directive that contains a nested accordion in one of the panes. When I close the 'parent' I would like to close its 'children'. I am having trouble because the accordion directive uses transclusion, and the scopes are actually siblings not parent to child. <div ng-controller="AccordionDemoCtrl"> <accordion close-others="oneAtATime"> <accordion-group heading="Static Header"> This content is straight in the template. </accordion-group> <accordion-group heading="{{group.title}}" ng-repeat="group in groups"> {{group.content}} </accordion-group>

Angular attribute directive that wraps its element

阅读更多关于 Angular attribute directive that wraps its element

like the title says, I'm attempting to make an attribute directive that wraps its parent and allows me to toggle between editing and showing the actual model value.. In short: <input ng-model="model" allow-edit="editing" /> Would end up looking like: <div> <div ng-hide="editing">{{model}}</div> <input ng-show="editing" ng-model="model"></input> </div> If everything went right. However, I keep on getting something more along the lines of: <input ng-model="model"> <!-- html from allow-edit directive's template --!> </input> I've used input as an example here, but I'd like to be able to wrap

Update real time d3 chart by socket.io

阅读更多关于 Update real time d3 chart by socket.io

I am writing a d3.js-based real time chart directive. The structure looks like this: myDirective.js : app.directive('myDirective', function(socketio) { return { restrict: 'EA', templateUrl: '../../views/partials/chart.html', controller: DataController, link: function(scope, elem, attrs, ctrl) { scope.Watch = scope.$watch(function() { return ctrl.data; }, function(newVal) { // d3 code part }); socketio.on(event, function(newdata) { ctrl.data.push(newdata); // redraw chart }); } }; }); In the above d3 code part, I refer to http://bl.ocks.org/gniemetz/4618602 . The main code is almost the same

订阅 directive