标签: directive

我尝试将Beautifull WYSIWYG Redactor(http://imperavi.com/redactor/)集成到自定义的AngularJS指令中.

Visualy它可以工作,但我的自定义指令与ng-model不兼容(我不明白为什么)

这是你如何使用我的指令:

<wysiwyg ng-model="edited.comment" id="contactEditCom" content="{{content}}" required></wysiwyg>

这是指令代码:

var myApp = angular.module('myApp', []);
myApp.directive("wysiwyg", function(){

var linkFn = function(scope, el, attr, ngModel) {

    scope.redactor = null;

    scope.$watch('content', function(val) {
        if (val !== "")
        {
            scope.redactor = $("#" + attr.id).redactor({
                focus : false,
                callback: function(o) {
                    o.setCode(val);
                    $("#" + attr.id).keydown(function(){
                        scope.$apply(read);
                    });
                }
            });
        }
    });

    function read() {
        var content = scope.redactor.getCode();
        console.log(content);
        if (ngModel.viewValue != content)
        {
            ngModel.$setViewValue(content);
            console.log(ngModel);
        }
    }

};

 return { …

我试图写指令是将评估用户权限.

如果不允许用户查看给定内容

1. 内容不会显示(完成,工作正常)

2. 来自权限指令内的控制器的请求不会被触发.

例:

控制器:

function MyController ($scope){
     // performing imediately server request, witch is allowed only for admin
     // therefore i will get error when non admin user access this page
}

权限指令:

return {
        priority: 1000,
        restrict: 'E',
        link: (scope, element, attrs) => {
            var permission = attrs.permission;

            if (/*evaluating permission*/) { 
                // user has permission, no work for me
                return;
            }

            element.remove();
        }
    };

全部一起:

<permission permission="isAdmin">
    <div ng-controller="MyController">
    </div>
</permission>

此版本正在从DOM中删除元素,但MyController中的请求仍然会被执行.当然,我可以在MyController中检查权限,但我不想这样做. …

我有以下代码,也可以在http://jsfiddle.net/garukun/u69PT/上摆弄.

视图:

<div data-ng-app="testApp">
    <div data-ng-controller="testCtrl">
        <strong>{{pkey}}</strong>
        <span data-test-directive data-parent-item="pkey" 
            data-parent-update="update(pkey)"></span>
    </div>
</div>

JS:

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

testApp.directive('testDirective', function ($timeout) {
    return {
        scope: {
            key: '=parentItem',
            parentUpdate: '&'
        },
        replace: true,
        template: '<div><p>{{key}}</p>' +
            '<button data-ng-click="lock()">Lock</button>' +
            '</div>',
        controller: function ($scope, $element, $attrs) {
            $scope.lock = function () {
                $scope.key = 'D+' + $scope.key;
                console.log('DIR :', $scope.key);

                // Expecting $scope.$parent.pkey to have also been
                // updated before invoking the next line.
                $scope.parentUpdate();
                // $timeout($scope.parentUpdate); // …

当我尝试编译链接到使用新的@import指令的文件的Objective C++文件(.mm)时,我遇到了一些错误.目前,我唯一的解决方案是用旧的#import指令替换@import.

还有其他解决方案,所以我仍然可以使用@import吗？

我有角度指令,接受url获取远程数据:

<my-tag src="http://127.0.0.1/srv1">...

指令本身:

app.directive('myTag', ['$http', function($http) {
return {
    restrict: 'E',
    transclude: true,
    replace: true,  
    //template: '<div ng-repeat="imgres in gallery">{{imgres.isUrl}}\'/></div>',
    scope:{
        src:"@",            //source AJAX url to dir pictures
    },
    controller:function($scope){
        console.info("enter directive controller");
        $scope.gallery = [];
        $http.get($scope.src).success(function(data){
           console.info("got data");
           $scope.gallery.length = 0;
           $scope.gallery = data;
        });
    }
}

一般来说它可以工作,我可以在FireBug控制台中看到:

enter directive controller
GET http://127.0.0.1/srv1
got data

但是,如果我将指令的第二个实例绑定到另一个url:

<my-tag src="http://127.0.0.1/srv2">...

仅适用于以下日志:

enter directive controller
GET http://127.0.0.1/srv1
enter directive controller
GET http://127.0.0.1/srv2
got data             <-- as usual it relates to first …

如何在Angular Directive中定位组件内的特定元素.
我有一个带选择器"highlighter"的组件.该组件具有使用ng-content的内容项目.
有一个选择器"荧光笔输入"的指令.
我相信这个指令应该仅应用于突出显示器组件内部的任何输入,但它应用于应用程序中的所有输入 - 这是错误的吗？

Plunker:https://plnkr.co/edit/4zd31C ？ p = preview

@Component({
  selector: 'highlighter',
  template: `
    This should be highlighted: 
    <ng-content></ng-content>
  `
})
export class HighlighterComponent {
}

@Directive({
  selector: 'highlighter input'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

如何禁用T4模板验证.VS2010刚刚验证了我的T4模板,其中有'#'(尖锐的角色).

error CS1040: Preprocessor directives must appear as the first non-whitespace character on a line

这个错误是无稽之谈.我甚至可以从我的模板生成代码,但我无法运行我的项目,因为我的模板抛出错误CS1040.

安装visual t4后出现此错误,即使从扩展管理器卸载也无法正常工作.为VS2010安装Visual T4给我带来亚音速模板的问题.禁用和卸载也没有帮助.我很失望.

相关帖子,但没有帮助: 从指令设置ngModel时的范围问题

编辑:我可以使用具有隔离范围的ng模型吗？也没用.

我遇到了一些问题,但我想是以更复杂的方式.我想写一个不使用任何输入进行数据保存的下拉菜单.我宁愿让ngModel来处理它.

http://jsfiddle.net/QeM6g/6/

上面的jsFiddle示例显示了一个演示,其中上述方法不起作用.

// this is what should work but doesn't
ngModel.$setViewValue(value);
scope.$apply(attr.ngModel,value);

由于某种原因,ngModelController的范围是我的范围的兄弟.所以它不会将更改传递回父级.至少所有其他兄弟范围的行为与您期望的一样.即ng-change组合起来.

我已经为我的应用程序创建了一个指令,在下面的问题中提到了 如何使用AngularJS或Javascript提供下载文件？指令代码如下所示

    appModule.directive('fileDownload', function ($compile) {
        var fd = {
            restrict: 'A',
            link: function (scope, iElement, iAttrs) {

                scope.$on("downloadFile", function (e, url) {
                    var iFrame = iElement.find("iframe");
                    if (!(iFrame && iFrame.length > 0)) {
                        iFrame = $("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>");
                        iElement.append(iFrame);
                    }
                    iFrame.attr("src", url);
                });
            }
        };
        return fd;
    });

这里使用范围.$ on,当我通过$ scope.$ emit或$ scope.$ broadcast调用此事件时,它不起作用.我的控制器代码如下所示

    function reportsController($scope, $http) {
        var self = this;

        $scope.$broadcast("downloadFile", 'http://google.com');
        $scope.$emit("downloadFile", 'http://google.com');
    }

我的html文件如下

    <div ng-controller="reportsController" id="repctrl">
        <a file-download></a>
    </div>

我在这做错了什么？

@Edit:在编译阶段添加了subscribe($ on),以避免在控制器中使用$ timeout.在这里 …

我有一个对象data中MainCtrl.该对象用于将数据传递给指令first-directive和second-directive.在两种情况下都需要双数据绑定.

因为first-directive,我传递完整的对象,data但second-directive我想传递numbersobject(scope.numbers = scope.dataFirst.numbers).

问题:

当我这样做<div second-directive="dataFirst.numbers"></div>,并检查是否dataSecond是一个对象时,它返回true.

但当我这样做<div second-directive="numbers"></div>,我检查是否dataSecond是一个对象,它返回false.

在这两种情况下,如果我这样做console.log(scope),显示scope.dataSecond属性.

问题:

为什么会发生这种情况以及将params传递给指令的正确方法是什么？

编辑: 这个想法是制定可重复使用的指令,这意味着他们不能依赖其他指令.

angular.module('app',[])

.controller('MainCtrl', function($scope) {
  $scope.data = {
    numbers: {
      n1: 'one',
      n2: 'two'
    },
    letters: {
      a: 'A',
      b: 'B'
    }
  }
})

.directive('firstDirective', function () {
  return {
    template: '<div class="first-directive">\ …