what if I want to create directive that match only for custom element && atribute

Question

let assume that I want to create directive that matched only for element that match amInput[type=dropdown] how can I do that?

I can for example:

.directive('amInput',function () {
        return {
            restrict: "E",
            scope: {
                data:'@'
            },
            compile:function(tElement, tAttrs){
                if (tAttrs.type != 'dropdown') return;

                return  function link ($scope, element, attr, ctrl) {
                    var parseResult = parse($scope.data);
                }
            }
        }
    });

but if I define another directive with isolate scope for am-input[type=checkbox]

.directive('amInput',function () {
        return {
            restrict: "E",
            scope: {
                data2:'@'
            },
            compile:function(tElement, tAttrs){
                if (tAttrs.type != 'checkbox') return;

                return  function link ($scope, element, attr, ctrl) {
                    var parseResult = parse($scope.data2);
                }
            }
        }
    });

angular#$compile throw exception about two directives define isolate scope.

Error: [$compile:multidir] Multiple directives [amInput, amInput] asking for new/isolated scope on: <am-input type="checkbox"></am-input>

It would probably be easier to just use one direcitve, check the type and return the link function base on that instead of just returning if the type is wrong — jsonmurphy, Jul 07 '15 at 14:34
your idea is good. I should adopt it. but what if I have different scope per directive ( like in the example ) — pery mimon, Jul 12 '15 at 16:43
If i understand you correctly, it shouldn't make a difference really, both `data` and `data2` could be declared in the scope and you'd then just use the one thats needed. You could probably even check within each corresponding link function to ensure that `data` or `data2` isn't undefined. — jsonmurphy, Jul 12 '15 at 18:19

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

directive name should be unique (as long as they match the same restrict) in your case you should probably merge them into one.

(just as a reference, this might help: Angular directive name: only lower case letters allowed?)

edited May 23 '17 at 12:03

Community

1
1

answered Jul 07 '15 at 14:41

OfirYaron

157
1
9

score 0 · Answer 2 · answered Aug 17 '15 at 18:39

Ok, I end up with that solution that make the differntes between the directives by postlink. when prelink is for everythig is similar between them:

directive('amInput',function () {
    var template = {
            'dropdown' :require('./dropdown.drv.html'),
            'checkbox-group' :require('./checkbox-group.drv.html')
    };

    var  postLinkPerType = {
            'dropdown': require('./postLink-OneFromMany'),
            'checkbox-group':require('./postLink-ManyFromMany')
    };

    return {
        restrict: "E",
        require: 'ngModel',
        scope:{
            selectAll:'='
            //,...
        },
        transclude:true,
        controller: function(scope, element, attr) {
            /*for binding stuff that use by post links */
        },
        controllerAs:'inputCtrl',
        bindToController:false,
        template: function (element, attr) {
            return template[attr.type];
        },

        compile: function (element, attr, ctrl, transcludeFn) {
           return {
               pre: function (scope, element, attr, ctrl, transcludeFn) {
                    /*******************************************/
                   /* some general/init code for all collection*/
                    /*******************************************/

                   /* init options list */
                   if( attr.data ){
                       /***********/
                       /* some code just if there is some attribute*/
                       /***********/
                   }

               },
               /*the little different code that make every directive in collection different*/
               /*different by TYPE attribute*/
               post: postLinkPerType[attr.type]
           }

        }
    }

})

what if I want to create directive that match only for custom element && atribute

2 Answers2