How to resolve an attribute in AngularJS

Question

I'm writing a directive and I'd like to have an attribute that can accept an expression, template url or string. Is there an angular method I can use that will resolve such a parameter? I mean where I can do....

<directive dialog="path/to/template.htm"></dialog>

or

<directive dialog="Are you sure you want to do that?" type="confirm"></dialog>

And in my directive code all I need to do is something like...

directive('dialog', function ($http) {
    return {
        compile: function (element, attrs) {
            var dialogContent = angular.resolveExpression(attrs.dialog);
        }
    }
}).

The idea being that if template.htm contained expressions within it or directives that they would all be parsed correctly.

+1 I would love to know if that's possible

Ahmad Alfy
– Ahmad Alfy

2013-06-08 14:43:27 +00:00
Commented Jun 8, 2013 at 14:43 — Ahmad Alfy
– Ahmad Alfy, Commented Jun 8, 2013 at 14:43
stackoverflow.com/questions/11913841/…

mb21
– mb21

2013-06-08 17:41:49 +00:00
Commented Jun 8, 2013 at 17:41 — mb21
– mb21, Commented Jun 8, 2013 at 17:41

Caio Cunha · Accepted Answer · 2013-06-09 01:17:35Z

2

You should use attribute $observe to achieve it, you would even get updates when attribute gets changed:

app.directive('test', function() {
  return {
    link: function(scope, elm, attr) {
      attr.$observe('dialog', function(value) {
        // this function will run everytime the attribute evaluate to
        // a different value, and "value" will be the already interpolated
        // string.
      });
    }
  };
});

Here is a working Plnker.

answered Jun 9, 2013 at 1:17

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben · Accepted Answer · 2013-06-14 13:57:08Z

The proper way to do it is to use the & scope option...

directive('slideToggle', function () {
        return {
            replace: true,
            restrict: 'E',
            scope: {
                on: '&',
                off: '&',
                bindto: '='
            },
            template: '<input type="checkbox" name=""/>',
            link: function (scope, element, attrs) {
                $(element).iButton({
                    labelOn: attrs.onlabel,
                    labelOff: attrs.offlabel,
                    enableDrag: (attrs.draggable == "false") ? false : true,
                    change: function () {
                        if (scope.bindto) {
                            scope.bindto = false;
                            scope.on();
                        } else {
                            scope.bindto = true;
                            scope.off();
                        }
                        scope.$apply();
                    }
                });
            }
        }
    })

Then in my HTML:

<slide-toggle onLabel="Active" offLabel="Inactive" bindTo="workstation.active" off="makeInactive()" on="makeActive()"></slide-toggle>

Collectives™ on Stack Overflow

How to resolve an attribute in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related