标签: angular-directive

我认为指令的本地提供者是为其子内容提供服务，例如：

//template in a module 
<table>
   <tr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</table>

myPipe在其构造函数中具有依赖项MyService：

因此，如果我将指令定义为：

@Directive({
    selector: "[myAttr]", 
    providers: [MyService]
})
export class MyDirective { }

并将其应用为：

<table>
   <tr myAttr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</table>

那么MyServiceinmyPipe的构造函数就可以解决了。

但是，如果有一个组件也在MyService其本地提供程序中定义并将其应用为：

<myComponent>
   <tr myAttr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</myComponent>

由于 和MyDirective都可以为MyComponent提供服务myPipe，那么会选择哪一个myPipe，本地提供商 MyDirective或MyComponent？

我正在使用http://isteven.github.io/angular-multi-select/中的 angular-multi-select .它根据我的需要工作.我正在使用模式形式的多选,我想验证它,但它不验证我何时使用所需的选项.任何人都可以建议我如何验证形式的角度多选.

码

<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) }">
    <label for="">Timings</label>
    <div ng-repeat="batch_timing in batch_timings" >
        <div class="row" ng-hide="batch_timing._destroy == 1">
             <div class="col-md-10">
                 <div class="row new-timings">
                    <div class="col-md-1">
                      <span class="text-style pull-left">Days</span>
                    </div>
                    <div class="timings-row" >
                      <div class="col-md-11">
                          {{batch_form.start_time.$error.required}}
                          <div 
                            multi-select
                            input-model="batch_timing.days"
                            output-model="resultData"
                            button-label="acronym"
                            item-label="acronym symbol name"
                            tick-property="ticked"
                            helper-elements="all none reset"
                            required name="days">
                          </div>  
                      </div>
                    </div>
                  </div>
                  <div class="row col-md-offset-1 new-timings">
                    <div class="col-md-1">
                      <span class="text-style">from</span>
                    </div>
                    <div class="col-md-4">
                      <select 
                        class="form-control"
                        data-ng-model="batch_timing.start_time" 
                        ng-options="timing …

如何使用jqlite以角度获取元素的attr数据？

HTML,

<button ng-click="loadForm($event)" href="form.php">Load Directive Form</button>
<div data-my-form></div>

棱角分明,

     app.directive('myForm', function() {
        return {
          controller:function($scope){
            $scope.isLoaded = false;
            $scope.loadForm = function(e){

                console.log(e.target.attr('href')); // error 

                var form = e.target.attr('href'); // error

                $scope.isLoaded = true;
            }
          },
          template: '<div><div ng-if="isLoaded" ng-include="'+ form +'" ></div></div>',
          link:function(scope, element) {

          }
        }
    });

我收到这个错误,

TypeError: e.target.attr is not a function

有任何想法吗？

在嵌套指令中绑定函数时,1.4更新似乎引入了一个问题.我有一个示例plunker:http://plnkr.co/edit/fQLY0N8BTNs38VC8ikll

码:

var app = angular.module('myApp', []);

app.controller('myCtrl', function(){
  this.searchFunction = function(term) {
    console.log('you searched for ' + term);
  }
 });

 app.directive('outerDirective', function(){
   return {
    restrict: 'E',
    scope: {
      outer: '&'
    },
    template: '<inner-directive inner="cx.outer(term)"></inner-directive>',
    controller: function(){

    },
    controllerAs: 'cx',
    bindToController: true
  };
});

app.directive('innerDirective', function(){
  return {
    restrict: 'E',
    scope: {
      inner: '&'
    },
    template: '<a ng-click="cx.execute()">Click</a>',
    controller: function(){
      this.execute = function(){
        this.inner('fred');
      }
    },
    controllerAs: 'cx',
    bindToController: true
  };
});

这是在1.3中工作,但在1.4中我应该采用一些新方法吗？

单击该链接,您将在控制台中看到以下错误:

TypeError:不能使用'in'运算符在fn中搜索fred中的'cx'(eval at(https://code.angularjs.org/1.4.0/angular.js:13036:15),:2:54)在目的地.(匿名函数)[内部]( …

我正在写一个Angular 1.5.0-beta2项目.

我想从返回对象的link属性调用控制器函数.

意思是...

angular.module('myalcoholist').directive("ngFileSelect",function() {

    return {
        controller: 'AddCoctailController',
        controllerAs: 'addCocktail',
        link: function ($scope, el) {

            el.bind("change", function (e) {

                var file = (e.srcElement || e.target).files[0];
/*THIS DOES NOT WORK */      addCocktail.getFile(file);
            })

        }

    }
});

正如你在这里看到的,我正在尝试运行一个名为getFile的控制器函数.

它甚至可能吗？

我有一个AngularJS应用程序,用于动态构建页面(从服务器检索XML并通过读取XML构建页面或表单)获取XML,我们必须构建几个页面,所有页面都相互关联,并且可以通过"下一步"进行否定,'上一页'按钮.

实现我们有类似的东西,

<div>
   <form name="myController.mainForm" novalidate>
      <div my-dynamic="myController.dynamicHtml"></div>
   </form>
</div>

herer myDynamic是指令,它处理生成的html,当我们必须导航到另一个页面时,我们为该页面生成新的HTML并将其分配给myController.dynamicHtml

在那个指令中我有这样的东西,

link: function postLink(scope, element, attrs) {
    scope.$watch(attrs.myDynamic, function (html) {
        element.html(html);
        $compile(element.contents())(scope);
    });
}

现在,在每个页面中,我都有许多输入控件(或指令),每个都有很少的绑定,这会增加观察者的数量.

我注意到,如果我 负 导航到另一个页面,以前页面上的观察者不会被破坏,直到my-dynamic指令从范围中删除.

当我们再次编译HTML时,我需要做的是确保前一页上的监视被破坏.

这个问题是关于当用户将数据输入到类型编号的输入时限制/验证输入.

我遇到的问题是,当模型首次加载时,任何整数或1dp的数字只能用1dp渲染.例如40或40.0都显示为40.0(不是40.00).

我已添加此代码,以便在用户键入新值后,它显示为2dp:

在模板文件中:

(change)="setTwoNumberDecimal($event)"

在组件文件中:

  setTwoNumberDecimal($event) {
    $event.target.value = parseFloat($event.target.value).toFixed(2);
  }

这可以在用户更改值后显示2dp .

我尝试编写一个指令,当数据最初加载时应该格式化为2dp,但是虽然该指令触发,但它不会将值更改为2dp.

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

@Directive ({
  selector: '[fbDecimalFormat]'
})

export class DecimalFormatDirective {

  constructor(private el: ElementRef,
              private renderer: Renderer2) {
    //renderer.setAttribute(el, 'value', parseFloat(el.nativeElement.value).toFixed(2));
    this.el.nativeElement.value = parseFloat(this.el.nativeElement.value).toFixed(2);
  }

}

仅供参考,评论的渲染线不起作用(错误:setAttribute无法识别) - 这是尝试与平台无关.

所以问题是:我如何获得输入以2dps呈现其初始值？

我目前正在使用角材料树模块，并在演示源代码https://github.com/angular/material2/blob/tree/src/demo-app/tree/tree-demo.html中进行操作：

• mat-tree-node 指令用作自定义html标签：这是什么意思？

• *matTreeNodeDef="let node"：let node表达式究竟是什么？

  扁平树

  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeTrigger matTreeNodePadding>
        {{node.key}} : {{node.value}}
    </mat-tree-node>
  
    <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
        <mat-icon matTreeNodeTrigger>
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
        {{node.key}} : {{node.value}}
    </mat-tree-node>
  </mat-tree>
  

  Run Code Online (Sandbox Code Playgroud)

我试图写一条指令，限制用户只能在输入文本控件中输入数字字符。

@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();
        }
    }

}

用法

<input type="text" placeholder="Volume" numericControl />

但这是行不通的，有人遇到过这个问题吗？

我第一次运行“ ng测试”，并收到此错误：

src / app / _directives / head-title.directive.spec.ts（5,23）中的错误：错误TS2554：需要2个参数，但得到0。

由于spec.ts文件是由Angular自动生成的，所以我不知道该怎么办...

这是我的指令：

import { Directive, ElementRef, AfterContentInit  } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Directive({
  selector: '[edHeadTitle]'
})

export class HeadTitleDirective implements AfterContentInit{

  constructor(private el: ElementRef,private titleService: Title) {}

  ngAfterContentInit(){
    this.titleService.setTitle(this.el.nativeElement.innerHTML);
  }

}

这是对应的规范：

import { HeadTitleDirective } from './head-title.directive';

describe('HeadTitleDirective', () => {
  it('should create an instance', () => {
    const directive = new HeadTitleDirective();
    expect(directive).toBeTruthy();
  });
});

显然，令人讨厌的部分是“ new HeadTitleDirective（）”……我猜应该有一些参数，但是哪些以及如何？

package.json的版本信息：

"devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8", …