标签: angular-directive

我正在使用角度手风琴指令来隐藏/显示内容.

我面临的问题是内容容器的高度没有变化.

这是一个吸烟者:http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c？p =preview

如果单击"显示更多",则可以看到内容是如何隐藏的,而不是显示作业的高度更改.

JS:

app.directive('sliderContentDirective', function () {
    return {
        restrict:'A',
        compile: function (element, attr) {
            // wrap tag
            var contents = element.html();
            element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');

            return function postLink(scope, element, attrs) {
                // default properties
                attrs.duration = (!attrs.duration) ? '0.7s' : attrs.duration;
                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
                element.css({
                    'overflow': 'hidden',
                    'height': '0px',
                    'transitionProperty': 'height',
                    'transitionDuration': attrs.duration,
                    'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
});

app.directive('sliderToggleDirective', function($document, $timeout) …

我对AngularJs和数据表很新.我需要使用ng-repeat填充表行中的数据.我能够第一次填充行并启用排序.当我点击箭头来排序或下降行数据擦除.

这是我的表格数据

<table datatable="ng" id="example" class="display" cellspacing="0"    width="100%">
                <thead>
                    <tr>
                        <th class="col1">Campaign Name</th>
                        <th class="col4">Description</th>
                        <th class="col5">Activate/Deactivate</th>
                        <th class="col5">edit</th>
                        <!-- <th class="col5">status</th> -->
                        <!-- <th class="col5">Details</th> -->
                    </tr>
                </thead>
                <tbody >
                    <tr ng-repeat="campaign in campaignListData">
                             <td>{{campaign.campaignObject.campaignName}}</td>
                             <td>{{campaign.campaignObject.campaignMessage}}</td>
                            <td><button type="button" class="pay-amount pending" style="margin-top:-10px;margin-right:17px;width:128px;height:34px"
                            value = "{{ campaign.campaignObject.label }}" title="ACTIVATE" ng-click="updateCampaignStatus(campaign.campaignObject.id)">
                                <span style="margin-left:-10px;margin-right:17px;width:128px;height:34px">{{ campaign.campaignObject.label }}</span>
                                </button>
                            </td>
                            <td><a href="<c:url value="${contextPath}/merchant/manageCampaign/editCampaignConfiguration"/>?campaignId={{ campaign.campaignObject.id }}">
                                <img class="tableImage" style="margin-left:-8px;margin-top:-10px;" src="<c:url value="/resources/images/setting.png" />" ></a>
                            </td>
                    </tr>
                </tbody>
            </table> 

这是我的排序javascript代码

<script type="text/javascript">
    $(document).ready(function() {
        $("#noCampaignData").hide();
        //$("#example_paginate").hide();
        var rowCount …

我正在寻找将Angular 1应用程序更新为Angular 2并且遇到了我的一个旧指令的问题.

这个想法很简单.当聚焦输入字段时,应添加一个类(md-input-focus),另一个类被删除(md-input-wrapper).然后这个过程应该在"模糊"事件上反转 - 即焦点丢失.

我的旧指令只包括行

.directive('mdInput',[
    '$timeout',
    function ($timeout) {
        return {
            restrict: 'A',
            scope: {
                ngModel: '='
            },
            link: function (scope, elem, attrs) {
                var $elem = $(elem);
                $elem.on('focus', function() {
                      $elem.closest('.md-input-wrapper').addClass('md-input-focus')
                })
                .on('blur', function() {
                 $(this).closest('.md-input-wrapper').removeClass('md-input-focus');
                })
             }

等等...

我显然对我的指示有经典的开始但是已经没有.....技能了

import {Directive, ElementRef, Renderer, Input} from 'angular2/core';

@Directive({
      selector: '.mdInput',

})

export class MaterialDesignDirective {
      constructor(el: ElementRef, renderer: Renderer) {
           // Insert inciteful code here to do the above
      }
}

任何帮助,将不胜感激.

更新:

HTML看起来像(在输入元素被聚焦之前):

<div class="md-input-wrapper"> …

我知道在ng2中我们ComponentFactoryResolver可以解决我们可以申请的工厂ViewContainerRef.

但是,指令有类似之处吗？一种实例化它们并将它们应用于组件中的投影内容的方法？

我有一个自定义指令,应该能够根据其他条件添加/删除类.

即

@Directive({
  selector: '[customDirective]'
})
export class CustomDirective {
  constructor(service: SomService) {
    // code to add class

    if (service.someCondition()) {
        // code to remove class
    }
  }
}

我试图在元素上定义模板变量并使用其隐藏属性来识别元素是否实际存在于DOM中,然后基于该元素显示另一个元素.但是如果有结构指令,模板变量似乎不会返回值.

<hr class="divider" *ngIf="true" #divi>
<div *ngIf="showResendWelcomeEmailButton">
  <a *wpHasAnyPermission="[{'something': true}]" 
     #resendEmailBtn>
    Resend Welcome Email
  </a>
</div>
<div class="pull-right">
  <a #editAccountBtn>Edit Account Details</a>
</div>

rbtn: {{resendEmailBtn?.hidden}}
ebtn: {{editAccountBtn?.hidden}}
dline: {{divi?.hidden}}

输出是

rbtn:
ebtn: false
dline: 

您可以在包含属性的元素上看到两个模板变量ngIf,wpHasAnyPermission但不返回值.

我想最终做的是使用resendEmailBtn与editAccountBtn在ngIf的hr决定显示了分频器.

解决这个问题的最佳方法是什么？我想避免处理组件代码.尝试用HTML解决这个问题.

这是一些代码片段。同样的模式 (afaik) 适用于英雄教程。

登录.component.html：

<div class="four wide column middle aligned" *ngIf="wrongCredentialsInserted">
     <div class="ui error message">Invalid credentials
     </div>
 </div>

登录.component.ts：

wrongCredentialsInserted: boolean = false;

//...      

onSubmit(login: LoginDto): void {
        console.log(`User '${login.username}' attempts to login...`);
        if (this.authService.login(login.username, login.password)) {
          this.location.back();
        } else {
          this.wrongCredentialsInserted = true; //This line gets executed!
        }
      }

即使我设置wrongCredentialsInserted为 true ，该消息也不会显示。它被设置为 true，我已经验证过了。我也尝试过类似的东西*ngIf="wrongCredentialsInserted === true"，因为我在其他地方读到过，但是没有用。我读到这可能与“单向数据流，从 Angular 2 开始”有关，但我知道我们能够在我们公司的 A2+ 项目中做这样的事情。AFAIK 一种方式数据绑定仅指组件-组件通信。

任何形式的帮助都受到高度赞赏。

编辑：由于我所做的事情似乎有点混乱，我将整个文件发布在这里。

登录.component.ts

import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {routerTransition} …

我遇到了以下Plunker来动态添加和删除组件.根据以上链接和许多其他SO帖子,我知道如何访问输入和输出属性:

this.compRef.instance.someProperty = 'someValue';
this.compRef.instance.someOutput.subscribe(val => doSomething()); 

而且我还有一个指令"appFont".

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appFont]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.font = 'Calibri';
    }
}

如何将这个"appFont"指令添加到新动态创建的组件中？

我正在尝试在 agm-map 上添加街景叠加层，以便在切换自定义按钮时访问。

但是，我无法访问和修改此地图元素的街景。

有人可以帮助我指出正确的方向吗？我正在尝试做一些类似于下面的例子。它在 javascript 中看起来很简单，但我正在努力在 Angular 5 中实现相同的目标

https://developers.google.com/maps/documentation/javascript/streetview#StreetViewOverlays

我想用指令设置 HTML 元素的内容。

export class AdvertisementDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.background = 'yellow';
    el.nativeElement.content = '<p>Hello World<p>';
  }

}

但它不起作用，也没有给出任何错误。

这样做背后的想法是在指令中包含 Ad 代码，并在我使用指令属性的任何地方设置它。广告代码包含JavaScriptHTML 代码。