angular-directive | 易学教程

AngularJS Dynamic Directives inside ng-repeat

阅读更多关于 AngularJS Dynamic Directives inside ng-repeat

I'm trying to create directives dynamically inside an ng-repeat. I have a directive-writer that creates a number of other directives but the directive-writer doesn't seem to output the directive attributes. So the second set of directives are never rendered. See this Plunker for a full demo. In short I have this directive tag: <div ng-repeat="dir in directives" directive-writer directive-text="{{ dir.text }}" directive-type="{{ dir.directive }}"></div> Scope data: $scope.directives = [ { directive: 'one', text: 'I am One' }, { directive: 'two', text: 'I am Two' }, { directive: 'three', text:

Downgrade NG2 Directive to AngularJS

阅读更多关于 Downgrade NG2 Directive to AngularJS

问题 So as far as I know we can downgrade NG2 Components & Services into AngularJS. But I'm wondering if it's possible to do that for NG2 Directives? I read the upgrade/downgrade guides already but I couldn't find anything. I found the way to upgrade AngularJS Directives but not the other way around! Something like this but for directive (This is for components): angular.module('heroApp', []) .controller('MainController', MainController) .directive('heroDetail', downgradeComponent({ component:

AngularJS form validation failing when input populated dynamic

阅读更多关于 AngularJS form validation failing when input populated dynamic

问题 I have the following form: If I click on a star, the input will be automatically populated with the number of the clicked star. (clicking on the 3rd star the input will be populated with number '3' like in the image bellow) The input bellow the stars is ng-required="true" . <form name="completeSurveyForm" role="form" novalidate ng-submit="vm.save()"> <ul class="question-list"> <li data-ng-repeat="question in vm.survey.questions | orderBy:'conditionalOrderId' track by question.id "> <small

AngularJS Dynamic Directives inside ng-repeat

阅读更多关于 AngularJS Dynamic Directives inside ng-repeat

问题 I'm trying to create directives dynamically inside an ng-repeat. I have a directive-writer that creates a number of other directives but the directive-writer doesn't seem to output the directive attributes. So the second set of directives are never rendered. See this Plunker for a full demo. In short I have this directive tag: <div ng-repeat="dir in directives" directive-writer directive-text="{{ dir.text }}" directive-type="{{ dir.directive }}"></div> Scope data: $scope.directives = [ {

Angular Dropdown directive doesn't work

阅读更多关于 Angular Dropdown directive doesn't work

问题 I am using Angular 6.0.5 alongside with Bootstrap 4.1.1 and I added a directive for dropdowns. But I can't make it work in no way. I have seen a lot of similar problems here but none was for Bootstrap 4. this is the dropdown html: <div class="btn-group" appDropdown> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Manage <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a class="dropdown-item" style="cursor: pointer" (click)=

Dynamically add *ngIf in a directive

阅读更多关于 Dynamically add *ngIf in a directive

问题 how can I dynamically add an *ngIf to an element that's decorated with an attribute directive? For a simple experiment, I tried this: @Directive({ selector: '[lhUserHasRights]' }) export class UserHasRightsDirective implements OnInit, OnDestroy { constructor(private el: ElementRef) { } ngOnInit(): void { this.el.nativeElement.setAttribute("*ngIf", "false"); } ... , but it didn't work. The browser showed me an error " ERROR DOMException: Failed to execute 'setAttribute' on 'Element' : ' ngIf'

Is the angular scope binding &(ampersand) a one time binding?

阅读更多关于 Is the angular scope binding &(ampersand) a one time binding?

问题 Is the angular scope binding &(ampersand) a one time binding? I see it referred to as a one-way binding, but is it also one-time? Let's say I have: <my-custom-directive data-item="item" /> And my directive is declared as follows: .directive('myCustomDirective', [ '$log', function ($log) { return { restrict: 'E', templateUrl: '/template.html', scope: { dataItem: '&' } controller: function ($scope) { // .... } }]) The reason I'm asking if the binding is one-time is because that seems to be what

How can i validate angular-multi-select?

阅读更多关于 How can i validate angular-multi-select?

问题 I am using angular-multi-select from http://isteven.github.io/angular-multi-select/. It works according to my need. I am using multi-select in modal form and i want to validate it but it is not validating when i use required option. Can anyone suggest me how to validate angular-multi-select in form. code <div class="form-group" ng-class="{'has-error' :batch_form.end_time.required || batch_form.start_time.required || batch_form.days.$invalid && (!batch_form.days.$pristine || submitted) }">

AngularJS - Multiple Directive Instances making XHR call multiple times

阅读更多关于 AngularJS - Multiple Directive Instances making XHR call multiple times

问题 I have an Angularjs directive 'ExampleDirective' which has the controller 'ExampleController'. The controller defines two Promise objects where each Promise object makes an Http GET request and returns the response. In the directive, we get the response data from the promise objects and process them to render the directive. ExampleDirective gets instantiated twice within the same view and each instance makes it's own Http GET requests. This causes performance issues on the front end due to

Angular - Apply style to element depending on sibling RouterLinkActive?

阅读更多关于 Angular - Apply style to element depending on sibling RouterLinkActive?

问题 I do not have only one menu bar on my app that I need to be painted when the user navigates, I have another components too that needs to be painted as well. Can I achieve this just using routerLinkActive ? menu.html <menu> <a routerLink="page1" routerLinkActive="active"> option1 </a> <a routerLink="page2" routerLinkActive="active"> option2 </a> </menu> This menu works great. But what I'm asking is how can I take advantage of routerLinkActive property placed in other HTML Tag. like: main.html