angular-directive

问题 I want to display progress bar when user select file size from dropdown and click on startRecording then i want to invoke directive. So i am trying to hide progressbar initially and on file selection displaying a progressbar because its based on file selection i have a lot of logic in directive controller that is being executed. User should select file size first then progressbar directive should invoked. How can i acheive that task ? ctrl.js $scope.startRecording = function () { $scope

问题 I'm using an angular directive to generate a reusable template and show some data in it. The directive also has an ng-click that should take an object and pass it to the parent controller . I'm kind of stuck, not really sure how to pass that data from the directive controller to the scope of the parent controller . I read here but the circumstances are a bit different. The js code of the directive: angular.module("app") .directive('userData', function() { return { restrict: "E", templateUrl:

问题 I'm using Angular 1.4.8 with Angular UI. What I'm trying to do is decorate the ui-sref directive so it will highlight a menu element (by setting the CSS class 'active') if the current $state.name matches the ui-sref state. I test to see if the element is descendent from my nav header, and if it is, I want to add an ngClass attribute to the element. For right now, I just want to make them all highlight; I can add the test for matching the state later. The true will be replaced with the actual

问题 I wrote an angular directive for d3 forced-directed graph. Code is here. I use $log.log("xx"); to debug the code. I realized for some reasone this directive load multiple times. For the mg-controller, the one the directive bond with, I have 2 factories and these two factories are called whenever the controller is initialized. By using $log.log("xx"); I realized when the pay is loaded, the d3 directive at least load 6 times, twice for each factory and twice after. The way I "got around" is

问题 If I have a custom directive ParentDirective and custom component ChildComponent arranged like so: <div appParent> <app-child></app-child> </div> ...then I can use @ContentChild in the directive to refer to the component: @ContentChild(ChildComponent) child: ChildComponent; See this StackBlitz where this is working. (It logs to the console to show that the child member is set). However, if I change appParent into a structural directive, then the child member is never set. <div *appParent>

问题 I am currently writing an angular directive that uses a template in a different HTML file and an isolated template. The directive gets some string via @ to its scope and that value is available in teh controller function. Somehow its not available via {{}} in the HTML template. Why is that so? How can I change that? I read something about the template using the parent scope but I don't fully understand that. Here is a code example: angular.module('moduleName') .directive('aGreatDirective',

问题 I am creating a file upload directive which uses the following markup. <file-upload name="myUploader" upload-url="{{$root.apiSettings.apiUrl}}/files" auto-upload="true" ></file-upload> I am trying to get the upload-url attribute in the directive controller like this. $scope.uploadUrl = $attrs.uploadUrl Obviously this doesn't work as I just get the un-evaluated expression with the curly braces in it. I tried using $scope.$eval to evaluate it but I got a parse error saying { was an invalid

问题 Im trying to write a directive that limit user to input numeric only characters in the input text control. @Directive({ selector: '[numericControl]' }) export class NumericControlDirective { contructor( private el: ElementRef, ) {} @HostListener('input', ['$event']) onInput(e: any) { if (e.which < 48 || e.which > 57) { e.preventDefault(); } } } Usage <input type="text" placeholder="Volume" numericControl /> But it doesn't work, Anyone came across this issue? 回答1: Use Keyboard event type -

问题 I have tow directives one is for ng-grid another is for pagination when I click page numbers in one directive ng-grid directive should be changed according to that, can I have any idea on that. 回答1: There are many ways to achieve it: For example: First solution You can share data between directives: <directive-one attribute="value" other-attribute="value2" shared-variable="yourData"> <directive-two shared-variable="yourData"> And set $watch inside first directive on that value scope.$watch(

问题 I am using the angular directive for fallback url as name initials if src is not found directive (function () { 'use strict'; angular .module('app') .directive('imageFallbackInitials', imageFallbackInitials); /* @ngInject */ function imageFallbackInitials() { return { restrict : "A", priority: 1000, scope: { imageFallbackInitials: '@' }, controller: function($scope) { // bind myVar property to scope $scope.getInitials = function(name) { var nameArray = name.split(" "); if(nameArray.length > 1