angularjs-directive

Why does this AngularJs Service with variable object name return an undefined object?

由 人盡茶涼 提交于 2020-01-04 02:35:19
问题 Scenario : I'd like to use this service to share some properties inside my webApp. This service should have some object inside and the controllers should be able to get and set those objects. JS : var oneApp = angular.module('myApp', ['ui.bootstrap', 'ngTouch', 'ngAnimate']) .service('sharedProps', function() { var anObjNameDest = ''; var anObjPropName = ''; this.progressBarDynTyped00 = { dynamic: 0, dynMultiplier: 10, max: 100 }; var progressBarDynTyped00 = { dynamic: 1000, dynMultiplier:

IntroJS Add Directive To Step Markup

由 萝らか妹 提交于 2020-01-03 17:15:14
问题 I am using introJS to have a user guide. I can show various features, however, i want to add a directive to the markup e.g: $scope.IntroOptions = { steps: [ { element: "#step1", intro: "Click the button: <button my-directive>Test Directive</button>", position: 'left' } ], With the above, i can see the text 'Click the button' plus a default button. myDirective.js var myDirective = function () { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function() {

How to add animation to angularjs uib-alert directive

由 橙三吉。 提交于 2020-01-03 17:06:27
问题 I want to add fade-in animation for new alerts pushed into array and fade-out for dismissed alerts. Alerts are dismissed automatically after 5 seconds. I've already included angular-animate ui-bootstrap and ui-bootstrap-tpls libraries. How can i get these animations working? See Demo: http://plnkr.co/edit/ecbCA7h2zVA4XnvUHfFX?p=preview HTML <html ng-app="myApp"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <script src="https://ajax

Speeding up Angular $compile function

由 隐身守侯 提交于 2020-01-03 17:06:12
问题 I'm manually compiling a template against a new scope: var scope = _.assign($rootScope.$new(true), { foo: 1, bar: 2 }) var element = angular.element('<my-element foo="foo" bar="bar"></my-element>') $compile(element)(scope) element.appendTo(container) After running a basic profile, the slowest part of this code is $compile , which takes ~1ms per compilation. I need to compile ~100 elements at a time, as the user scrolls. There are a lot of optimizations I can apply to speed up compilations

Remove the angular2 component's selector tag

由 拥有回忆 提交于 2020-01-03 13:30:41
问题 I have a user component for 2 templates. First template for users table, second one for a user page. I select which template to use by role attribute. First example of using: <table> <tr user *ngFor="let user of users" [user]="user" role="UserTableItem"></tr> </table> In another one template I use my component like this: <div user [user]="user" role="UserCard"></div> So, my user component template: // user.template.html <user-card [user]="user" *ngIf="role === 'UserCard'"></user-card> <user

DOM elements not ready in AngularJS Directive's link() function

由 自作多情 提交于 2020-01-03 10:54:39
问题 I'm creating a AngularJS directive that is supposed to have a C3.js-based chart in it. Problem is that the C3 library does not see the DOM element it's supposed to attach to. The directive's link function looks something like this: link: function(scope, element, attrs) { scope.someid = 'id'; scope.chart = c3.generate({ bindto: "#somechart"+scope.someid, data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } }); console.log($("#somechart"+scope.someid)

Angular js trigger blur event

由 大憨熊 提交于 2020-01-03 08:14:15
问题 I'm trying to setup an input, such that when length == 5, it will automatically trigger a blur event. How can I do this? This is pretty much the concept: <input type="tel" placeholder="type here." maxlength="5" name="digits" ng-model="digits" ng-change="if (digits.length ==5) { TRIGGER BLUR};"> Thanks 回答1: Here is a basic directive that should get you what you are looking for: app.directive('lengthChecker', function() { return function(scope, element, attributes) { scope.$watch(attributes

How to add validation attributes to md-autocomplete angular material directive

由 五迷三道 提交于 2020-01-03 07:28:11
问题 I'm using version 0.7.1 of angular material. I'm using the autocomplete as described here: Autocomplete demo However, it doesn't seem to support validation logic, even though it generates a textarea: Autocomplete directive documentation I imagine that I can add logic in the querySearch function to switch ng-valid to ng-invalid. Is this correct? If this is the case, then I need a handle on the md-autocomplete, but this is difficult, because the name attribute gets removed. 回答1: Quick update,

Angular Material mdTabs : is it possible to have vertical tabs?

由 邮差的信 提交于 2020-01-03 07:08:07
问题 I am looking for Tabs displayed top to bottom with tab navigation on the left. Is there anyway this can be achieved in Angular Material library? 回答1: This codepen by Rahul Sagore uses vanilla Material, not specifically for Angular, but it's exactly what you want. I was looking for the same thing as you; it's a shame Material doesn't offer this, but I can see how it would go against their principles and make Material too extensive. It comprises of custom css (perhaps overriding, I'm not sure)

handle APlayer through angular js - play music dynamically

由 时光毁灭记忆、已成空白 提交于 2020-01-03 05:38:07
问题 I am new to angular js - trying to build an audio play using Aplayer Task:- 1. Play music dynamically 2. On click of album get json data and add to aplayer (function() { 'use strict'; angular.module('app', []); angular .module('app') .directive('aplayer', aplayer); function aplayer() { return { restrict: 'AC', link: function(scope, element, attrs) { // `element` is the angular element the directive is attached to // APlayer need the native one var nativeElement = element[0]; var ap1 = new
订阅 angularjs-directive