标签: directive

我想用angular-permisssion实现类似的东西.并且需要控制元素的存在,我需要使用角度结构指令.

一开始,我认为这样的语法会起作用:

<h2 *permissionIf [permissionIfExcept]="'Read'">Except</h2>

但是,它不起作用.

此外,官方指南仅教您如何使用单个输入编写自定义结构指令.对于多输入,一些第三方教程涉及一些.但那是使用角度模板微语法来实现数据绑定.然后出现一个问题:模板语法不支持纯键值输入:

<h2 *permissionIf="except: map.except?only: 'test'">Except</h2>

它扩展到这个(这是非法的):

<h2 template="permissionIf except: map.except?only: 'test'">Except</h2>

一个愚蠢的临时解决方案是添加一个无用的变量声明.

<h2 *permissionIf="let i;except: map.except?only: 'test'">Except</h2>

另一个不方便的方法是使用模板元素来包装代码.

<template permissionIf [permissionIfExcept]="'Read'">
  <h2>Except</h2>
</template>

以上都不是可以接受的.但我找不到更好的解决方法.

希望有些人可以提出一些建议:).

我有一个带变量类型的指令myDirective.如果我运行,<my-directive type="X">我希望指令使用templateUrl:x-template.html.如果我这样做,<my-directive type="Y">我希望该指令使用templateUrl:y-template.html.

这是我目前的指示.

app.directive('myDirective', function() {
    var myDirective = {
        templateUrl: 'X-template.html',
        restrict: 'E',
        scope: {
            type: '=' 
        },
    };
    return myDirective;
});

我通过stackoverflow和angular文档阅读,但没有找到我需要的任何东西.

我现在正试图做一些事情:

if ($scope.type === 'X') {
    templateUrl: 'X-template.html',
}
else if ($scope.type === 'Y') {
    templateUrl: 'Y-template.html',
}

但不知道在哪里做.

你们知道这是否可行以及如何实现？

正如解释这里的angularjs指令NG-SRC是用来防止浏览器加载资源(如图像)车把得到解析之前.我目前正在使用以下代码:

<div ng-controller="MyCtrl">
  <img ng-src="http://localhost:8081/media/{{ path }}" />
</div>

使用以下JS:

function MyCtrl($scope, $timeout) {
    $timeout(function () {
        $scope.path = 'images/23694c70-04d7-11e3-9ba8-73fb00de24c4.png';
    }, 1000);
};

正在从Web服务检索路径.由于此延迟,浏览器会尝试加载http://localhost:8081/media/,从而导致404.一旦检索到路径,浏览器就会发出正确的请求并加载图像.

在所有数据准备好之前,防止加载任何资源的首选方法是什么？

请参阅jsfiddle以获取说明我的情况的示例.

谢谢,

马亭

1. ng-cloak指令是什么？
2. 我们为什么用它？

我正在尝试使用指令来创建和附加几个标签,<div>如下所示:

module.directive('createControl', function(){
  return function(scope, element, attrs){    
    console.log(attrs.createControl); // undefined     
  }                                          
});                                         


<div class="control-group" ng-repeat="(k, v) in selectedControls">
  <div create-control="{{ v.type }}"></div>
</div>

在attrs我有这个结构:

$$element: b.fn.b.init[1]
$$observers: Object
$attr: Object
createControl: "date"
style: "margin-right: 15px"
__proto__: Object

但是当我尝试使用时,attrs.createControl我会undefined理解为什么.实际问题:如何将范围变量传递给指令？

我无法使Karma适用于具有外部模板的指令.

这是我的业力配置文件:

preprocessors: {
    'directives/loading/templates/loading.html': 'ng-html2js'
},

files: [
    ...
    'directives/loading/templates/loading.html',
]

ngHtml2JsPreprocessor: {
    prependPrefix: '/app/'
},

在指令文件中:

...
templateUrl: '/app/directives/loading/templates/loading.html'
...

在spec文件中:

describe('Loading directive', function() {
    ...
    beforeEach(module('/app/directives/loading/templates/loading.html'));
    ...
});

我收到以下错误:

由于以下原因无法实例化模块/app/directives/loading/templates/loading.html:错误:无模块:/app/directives/loading/templates/loading.html

如果我修改karma-ng-html2js-preprocessor的源代码来打印生成文件的结果,我得到:

angular.module('/app/directives/loading/templates/loading.html', []).run(function($templateCache) {
    $templateCache.put('/app/directives/loading/templates/loading.html',
        '<div ng-hide="hideLoading" class="loading_panel">\n' +
        '   <div class="center">\n' +
        '       <div class="content">\n' +
        '           <span ng-transclude></span>\n' +
        '           <canvas width="32" height="32"></canvas>\n' +
        '       </div>\n' +
        '   </div>\n' +
    '</div>');
});

所以似乎生成的JS文件是正确的但没有被karma加载......

另外,如果我使用--log-level debug,这里是与模板相关的行:

DEBUG [preprocessor.html2js]:处理"/home/rightink/public_html/bo2/master/web/app/directives/loading/templates/loading.html"

DEBUG [观察者]:已解决的文件:

      /correct/path/to/the/app/directives/loading/templates/loading.html.js

Run Code Online (Sandbox Code Playgroud)

我错过了什么吗？

谢谢,

我有以下指令(TextElementDirective),它有4个输入变量colorHex,fontFamily,fontWeight,fontStyle.我想使用此指令设置元素的颜色和样式.

@Directive(
{
    selector: "[text-element-map]",
    // host: {
    //     '(mousemove)': "onMouseMove()"
    // }
}
)

export class TextElementDirective{
@Input() colorHex : string;
@Input() fontFamily : string;
@Input() fontWeight : string;
@Input() fontStyle : string;

constructor(private el: ElementRef){
    this.setElement();
}

setElement(){
    if(this.colorHex){
        this.el.nativeElement.style.color = this.colorHex;
    }
    if(this.fontFamily){
        this.el.nativeElement.style.fontFamily = this.fontFamily;
    }
    if(this.fontWeight){
        this.el.nativeElement.style.fontWeight = this.fontWeight;
    }
    if(this.fontStyle){
        this.el.nativeElement.style.fontStyle = this.fontStyle || "";
    }
}

onMouseMove(){
    this.setElement();
}
}

当我在另一个组件中使用此指令时,作为属性,它不会设置元素样式和颜色.即使单击该按钮,也不会设置元素值.

如果我在指令中使用主机(onmousemove),它可以正常工作.但我想在启动时设置值.

知道我错过了什么吗？

这是使用它的测试组件.

@Component({
template:
`
    <h3>Test</h3>
    <div>
        <span>text-element-map: </span>
        <span class="text-content" …

我正在尝试在文档根目录外的该文件夹中创建一个名为week7的文件夹和一个名为hello.html的html页面,并通过Alias指令查看它.

我在Document Root中创建了一个名为week7的文件夹.我为它选择了这个位置:

/usr/local/www/week7

而我的文档根目录是:

/usr/local/www/apache22/data

在httpd.conf和标签下,我写道:

    Alias /week7 /usr/local/www/week7
<Directory /usr/local/www/week7>
    Require all granted
</Directory>

重新启动服务器后,我收到以下消息:禁止403消息.

我尝试更改hello.html文件,week7文件夹甚至www文件夹的权限,但没有任何更改.

有任何想法吗？

在我的AngularJS应用程序中,我到处都有不同的复杂输入.例如,某些输入具有使用Google地方信息自动完成或使用Twitter Bootstrap自动完成功能的指令.

我正在寻找一种方法来制作一个指令,当我们添加一些像iOS功能这样的文字时,它会显示一个擦除按钮.

我做了这个,但是scope.erase没有开始,也没有开始ng-show.

是否可以在文本输入后添加HTML并在控制器内"播放"它们？

我的测试:

app.directive('eraseBtn', function($parse, $compile){

return {
    require: 'ngModel',
    restrict: "A",
    transclude: true,
    link : function(scope, element, attrs, model){

        element.parent().append('<button ng-click="erase()" ng-show="model.length > 0" class="erase-btn">x</button>');

        scope.erase = function(){
            console.log('Erase test');
        }
    }
}
});

我不想使用模板,因为我的所有输入的HTML都非常不同.

我正在尝试创建刀片指令,如果变量未定义,则返回变量(如果变量定义)或echo"无数据".

这是我的代码AppServiceProvider.php:

<?php

namespace App\Providers;

use Blade;
use Illuminate\Support\ServiceProvider;


class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::directive('p', function($ex) {
            error_log(print_r($ex,true));
            return '<?php $defined_vars = get_defined_vars(); if(array_key_exists(\''. $ex .'\', $defined_vars) ): echo ' . $ex . ' ; else: echo \'no data\'; endif;?>';
        });
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

这是我的index.blade.php:

<p class="lead">@p($myvar)</p> …