标签: directive

我目前正在尝试在一个页面上加载多个谷歌地图.我不想将谷歌地图API脚本包含在HTML代码中,因为我不希望加载脚本,除非地图在当前页面中.我想在单个指令中调用我的地图,该指令也将执行谷歌地图API脚本延迟加载.

所以我四处搜索并找到了一个我稍微调整过的解决方案,但我的问题是它只会加载一个地图而不会加载其他地图.

我的HTML看起来像这样:

<div id="mapParis" class="google-map" lat="48.833" long="2.333"></div>
<div id="mapWashington" class="google-map" lat="38.917" long="-77.000"></div>
<div id="mapTokyo" class="google-map" lat="35.667" long="139.750"></div>

指令:

// Google Map
app.directive('googleMap', ['$window', '$q', function( $window, $q ) {
    function loadScript() {
        console.log('loadScript');

        // use global document since Angular's $document is weak
        var s = document.createElement('script');
        s.src = '//maps.googleapis.com/maps/api/js?sensor=false&language=en&callback=initMap';
        document.body.appendChild(s);
    }

    // Lazy loading of the script
    function lazyLoadApi(key) {
        console.log('lazyLoadApi');

        var deferred = $q.defer();

        $window.initMap = function () {
            deferred.resolve();
        };

        if ( $window.attachEvent …

我正在尝试使用Karma和Jasmine测试一个指令来完成一些事情.首先是它使用templateUrl,其次是它定义了一个控制器.这可能不是正确的术语,但它在声明中创建了一个控制器.设置Angular应用程序,以便每个单元都包含在自己的模块中.例如,所有指令都包含在模块app.directive中,所有控制器都包含在app.controller中,所有服务都包含在app.service等中.

为了使事情进一步复杂化,在该指令中定义的控制器具有单个依赖关系,并且它包含一个函数,该函数使$ http请求在$ scope上设置值.我知道我可以使用$ httpBackend mock来模拟这个依赖关系来模拟$ http调用并将正确的对象返回给这个函数的调用.我已经在我创建的其他单元测试中做了很多次,并且很好地掌握了这个概念.

下面的代码是用CoffeeScript编写的.

这是我的指示:

    angular.module('app.directive')
      .directive 'exampleDirective', [() ->
        restrict: 'A'
        templateUrl: 'partials/view.html'
        scope: true
        controller: ['$scope', 'Service', ($scope, Service) ->
          $scope.model = {}
          $scope.model.value_one = 1

          # Call the dependency
          Service.getValue()
            .success (data) ->
              $scope.model.value_two = data
            .error ->
              $scope.model.value_two = 0
        ]
      ]

这是依赖服务:

    angular.module("app.service")
      .factory 'Service', ['$http', ($http) ->

      getValue: () ->
        options.method = "GET"
        options.url = "example/fetch"

        $http _.defaults(options)

这是观点:

    <div>
      {{model.value_one}} {{model.value_two}}
    </div>

我已经简化了这一点,因为我的目标只是了解如何连接它,我可以从那里接受它.我用这种方式构造它的原因是因为我最初没有创建它.我正在为现有项目编写测试,但我没有能力以其他方式配置它.我试图编写测试,但不能让它做我想要的.

我想测试以查看值是否绑定到视图,如果可能还要测试控制器是否正在正确创建值.

这是我得到的:

    'use strict'

    describe "the …

我有我的html文件指令

<add />
<back />

并且指令在表格上

.directive('add', ['$window', ...

和

.directive('back', ['$window', 

这很好用.

如果我将指令更改为驼峰案例:

.directive('addPlayer', ['$window', ...

<add_player />
<back />

和

<add:player />
<back />

显示很好而

<add-player />  regular dash
<back />

仅显示<add-player>,之后的所有内容均未显示.

有什么想法吗？

编辑:

我在这里得到了同样的行为

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

我想在使用属性Directive键入时更改(强制)输入字段值.有了它,我想创建一些指令,如大写,小写,maxlength,filterchar等,用于表单上的输入字段.我找到了这个例子:Angular 2 Attribute Directive Typescript Example但这似乎不起作用.也许它是为早期构建的Angular2做的.然而,这正是我想要做的.

当我创建这样的指令时:

import {Directive} from 'angular2/core';
import {NgModel} from 'angular2/common';

@Directive({ 
selector: '[ngModel][uppercase]', 
host: {
    '(input)' : 'onInputChange()'
      }
})
export class UppercaseDirective{

constructor(public model:NgModel){}

onInputChange(){
    var newValue = this.model.value.toUpperCase();
    this.model.valueAccessor.writeValue(newValue);
    this.model.viewToModelUpdate(newValue);
    }
}

并在这样的表单上使用它:

<input type="text" class="form-control" [(ngModel)]="field.name" ngControl="name" #name="ngForm" required uppercase>

(并注册NgModel为提供者).我得到了

undefined this.model.value.

我可以使用$event.target.value = $event.target.value.toUpperCase()(当传递$event时onInputChange())并且适用于视图(它确实将输入显示为大写.但它不会更新绑定字段"field.name".

那么如何创建一个Angular2属性指令呢？

- 编辑 -

经过一番进一步调查后,我设法得到了我想要的东西.Günter提供的答案更接近我的初衷,也许更好.但这是另一种方式:

import {Directive, Input, Output, EventEmitter} from 'angular2/core';

@Directive({ 
selector: '[ngModel][uppercase]',
host: …

我经常使用类似对象的预处理器宏作为C代码中的布尔标志来打开和关闭代码段.

例如

#define DEBUG_PRINT 1

然后像使用它一样

#if(DEBUG_PRINT == 1)
    printf("%s", "Testing");
#endif

但是,如果包含该头文件的头文件#define忘记包含在源代码中,则会出现问题.由于未声明宏,因此预处理器将其视为等于0,并且#if语句永远不会运行.

当忘记包含头文件时,可能发生非期望的,不守规矩的行为.

理想情况下,我希望能够检查宏是否已定义,并在一行中检查它是否等于某个值.如果未定义,则预处理器会抛出错误(或警告).

我正在寻找以下内容:

#if-def-and-true-else-throw-error(DEBUG_PRINT)
    ...
#endif

这就像一个组合#ifdef和#if,如果它不存在,使用#error.

我已经探索了一些途径,但是,预处理器指令不能在#define块内使用,据我所知,如果在#if语句中使用宏时没有定义宏,则没有预处理器选项来抛出错误/警告.

我正在尝试做这样的事情:

<ul>
    <li ng-repeat="{{myRepeatExpression}}">{{row.name}}</li>
</ul>

但由于ng-repeat逻辑处于指令的编译状态,因此它将其{{myRepeatExpression}}视为普通字符串而不是变量.显然,哪个不起作用.

那有什么解决方法吗？

在Delphi中,您可以使用编译器指令禁用特定警告,例如

{$WARN USE_BEFORE_DEF OFF}

但是当我尝试用特定的提示做到这一点时,编译器表示它不知道{$ HINT}是什么,而我的undercore_style_name是从帮助文件中获取的.有没有办法做到这一点？

我正在研究一组角度指令,我想根据属性的存在或值加载正确的模板.

<my-form horizontal> </my-form>
<my-form vertical> </my-form>

如果是水平的,则templateUrl应该是/partials/horizontal-form和如果是vertical,则应该是templateUrl/partials/vertical-form

我对templateUrl感兴趣,因为我不能使用,template因为html取决于属性.在该compile.pre函数中,html已经加载.

如果还有另一种方法可以达到这个目的,我会对它开放,因为我现在开始使用棱角分析,信息越多越好.

谢谢

我正试图在Angular中测试一个指令,但是我无法使用相应的模板.

该指令列出了templateUrl,如下所示

templateUrl: 'directives/listview/view.html'

现在,当我写任何单元测试时,我得到了

Error: Unexpected request: GET directives/listview/view.html

所以我必须使用$ httpBackend并回复一些明智的事情

httpBackend.whenGET('directives/listview/view.html').respond("<div>som</div>");

但实际上我想简单地返回实际文件,并同步执行,因此等待,延迟对象等没有问题.如何做到这一点？

我在网上找到了这个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>