标签: directive

我在网上找到了这个Angular Directive来添加一个twitter分享按钮.这一切似乎都是明星前进,但我无法弄清楚attrs.$observe实际上在做什么.

我查看了文档,但无法$observe在任何地方看到引用.

该指令似乎只是添加了href来自控制器的指令,所以任何人都可以解释其余代码在做什么？

module.directive('shareTwitter', ['$window', function($window) {

    return {
        restrict: 'A',
        link: function($scope, element, attrs) {

            $scope.share = function() {

                var href = 'https://twitter.com/share';

                $scope.url = attrs.shareUrl || $window.location.href;
                $scope.text = attrs.shareText || false;

                href += '?url=' + encodeURIComponent($scope.url);
                if($scope.text) {
                    href += '&text=' + encodeURIComponent($scope.text);
                }

                element.attr('href', href);
            }

            $scope.share();

            attrs.$observe('shareUrl', function() {
                $scope.share();
            });

            attrs.$observe('shareText', function() {
                $scope.share();
            });
        }
    }
}]);


<a href="" target="_blank" share-twitter share-url="[[shareTwitterUrl]]" share-text="[[shareTwitterText]]">Twitter</a>

这是情况.我有一个指令,取决于templateUrl.

该指令看起来像这样:

angular.module('foo')
.directive('bar', function(){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: '/foo/bar.html',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

该指令是我的一个应用程序的一部分,重要的是它仍然是应用程序的一部分.但是,我也想在其他项目中使用相同的指令,目前我正在使用bower将存储库下载到我的其他项目中.但是,此指令将中断,因为templateUrl将不正确.Bower克隆了整个项目,模板的实际路径充其量只需要在我的其他项目中:

/lib/public/foo/bar.html

其他人如何管理这个？

我有以下组件:

@Component({
    selector: 'pc-radio-button',
    templateUrl: './radio-button.component.html',
    providers: [
        {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRadioButtonComponent), multi: true}
    ]
})
export class RadioButtonComponent implements ControlValueAccessor {
    ...
}

我可以通过这些输入分配和更改值:

<pc-radio-button [formControl]="formControl"></pc-radio-button>
<pc-radio-button [formControlName]="inputControlName"></pc-radio-button>

但是我需要组件可以直接访问指定的formControl,因为我需要根据其状态添加样式.

通过创建@Input()formControl并不能解决问题.因为它不包括通过formControlName分配表单控件的情况.

我正在尝试定义一个sortable包装jqueryui的可排序插件的指令.

角度代码是:

module.directive('sortable', function () {
    return function (scope, element, attrs) {
        var startIndex, endIndex;
        $(element).sortable({
            start:function (event, ui) {
                startIndex = ui.item.index();
            },
            stop:function (event, ui) {
                endIndex = ui.item.index();
                if(attrs.onStop) {
                    scope.$apply(attrs.onStop, startIndex, endIndex);
                }
            }
        }).disableSelection();
    };
});

html代码是:

<div ng-controller="MyCtrl">
    <ol sortable onStop="updateOrders()">
         <li ng-repeat="m in messages">{{m}}</li>
    </ol>
</div>

代码MyCtrl:

function MyCtrl($scope) {
    $scope.updateOrders = function(startIndex, endIndex) {
        console.log(startIndex + ", " + endIndex);
    }
}

我想在我的回调中得到它startIndex并用它们做一些事情,但它打印出来:endIndexupdateOrders

undefined, …

我正在尝试编写一个角度指令,为标签添加验证属性,但它似乎没有工作.这是我的演示.您将注意到,如果删除第二个输入框中的文本,"Is Valid"仍然为true,但如果删除第一个输入框中的文本则为false.

http://plnkr.co/edit/Rr81dGOd2Zvio1cLYW8D?p=preview

这是我的指示:

angular.module('demo', [])
.directive('metaValidate', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.attr("required", true);
        }
    };
});

我猜我只是缺少一些简单的东西.

我有一个(简化的)指令

angular.module('myApp')
   .directive('myButton', function () {
        return {
            restrict: 'E',
            scope: {
                callbackFn: '&'
            },
            template: '<button ng-click=ca;;backFn($evenb)'
        }
   });

现在,在一些父控制器中我定义了一个回调函数:

this.myCallback = function ($event) {
    this.doIt($event);
}

和HTML:

<my-button callback-fn="page.myCallback()"></my-button>

(我正在使用像bindToController和的东西controllerAs)

问题是$event永远不会传递给myCallback,这很可能与我如何绑定这个函数(&)有关.但另一方面,myCallback我想在里面使用this.

有办法解决这个问题吗？没有像这样的事情

var self = this;
this.myCallback = function ($event) {
     self.doIt($event);
}

我一直在努力理解框架中这两个概念之间的区别.

我非常熟悉AngularJS 1.x中的指令,Angular 2中的组件和指令似乎与此概念非常相似......

我是打字稿的新手,我正在尝试为angular 2指令创建一个函数.任何人都可以用n00bs的语言解释当我用Gulp编译时错误试图告诉我什么？

无法在环境上下文中声明实现

该消息适用于offset()和toggler().

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

@Directive({
  selector: 'offCanvas',
  inputs: ['target', 'toggle', 'placement', 'autohide', 'recalc', 'disableScrolling', 'modal', 'canvas', 'exclude'],
  host: {
    '(click)': 'Click()'
  }
})

export class OffCanvas {  
  @Input('target') target: string;
  @Input('canvas') canvas: string;
  @Input('state') state: string;
  @Input('exclude') exclude: string;
  @Input('placement') placement: string;
  @Input('toggle') toggle: boolean;
  @Input('autohide') autohide: boolean;
  @Input('recalc') recalc: boolean;
  @Input('disableScrolling') disableScrolling: boolean;
  @Input('modal') modal: boolean;

  public offset() {
    switch (this.placement) {
      case 'left':
      case 'right':  return …

我正在Angular JS中创建一个自定义指令.我想在模板渲染之前格式化ng-model.

这是我到目前为止:

app.js

app.directive('editInPlace', function() {
    return {
        require: 'ngModel',
        restrict: 'E',
        scope: { ngModel: '=' },
        template: '<input type="text" ng-model="ngModel" my-date-picker disabled>'
    };
});

HTML

<edit-in-place ng-model="unformattedDate"></edit-in-place>

我想在将unformattedDate值输入模板的ngModel之前格式化.像这样的东西:

template: '<input type="text" ng-model="formatDate(ngModel)" my-date-picker disabled>'

但这给了我一个错误.这该怎么做？

我使用这个指令,迭代一个数组"myArr",过滤几个条件.

<myDirective 
    myData='item' 
    ng-repeat="item in filteredArr = (myArr | filter:searchField | filter:checkboxFilter)" 
    ng-show="$index < visible" 
/>

这给了我两个问题,我想得到一些意见:

a)ng-show部分在那里,因为我有一个处理这个的条件:

<p>
    <a ng-click='visible=visible+10' ng-show='visible < filteredArr.length'>Show more</a>
</p>

为了显示或隐藏"显示更多"部分.我无法想出切换这个和/或物品本身的另一个想法.一旦我们开始,$ scope.visible在控制器内部设置为10.我无法使用limitTo,因为它不能让我确定是否有更多要显示,因为它当然会"切断"数组到设定的限制.

b)在指令内部,模板打印出一个

<img ng-src="..."> 

标签.只要在上述结构中没有显示这些图像,我怎么能阻止它们加载？

非常感谢提前!