AngularJS Get Only Directive Attribute Names That Interpolates

allenhwkim

I created ngMap,
and this directive does not watch any attribute values because attribute names are dynamic(too many cases).

However, I wanted to apply $observe to attribute only if directive users has given the attribute values to be dynamic using double curly brackets

I have tried here to detect if user uses double curly bracket using compile function and link function, but no luck yet.

To explain, from the following code

  <body ng-app="myApp" ng-controller="MyCtrl">
    <div my-dir foo="{{foo}}" bar="bar"></div>
  </body>

I want to detect attribute foo value is dynamic, but attribute bar value is not.

I tried this code to check it, but not succeeded.

var app = angular.module("myApp", []);
app.controller('MyCtrl', function($scope) {
  $scope.foo = "FOO";
});
app.directive('myDir', function() {
  return {
    compile : function(tele, tattr) {
     return {
      pre : function(scope, iele, iattrs) {
        console.log('pre', iattrs);  // this is the same as the below
      },
      post : function(scope, iele, iattrs) {
        console.log('post', iattrs);
      }
     };
    }
  }
});

My question is how do I detect if an attribute value is dynamic by AngularJS or not?

ryeballar

You can check the non-interpolated value by getting the attribute value of the element itself, via elem.attr().

DEMO

app.directive('myDir', function() {
  return function(scope, elem, attr) {
    var regex = /{{.*}}/;

    if(regex.test(elem.attr('foo'))) {
      attr.$observe('foo', function(value) {
        // observe
        console.log('observing foo');
      });
    }

    if(regex.test(elem.attr('bar'))) {
      attr.$observe('bar', function(value) {
        // observe
        console.log('observing bar');
      });
    }

  }
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Get value of attribute in Angularjs custom directive

From Dev

AngularJS Directive: Get Object from Attribute

From Dev

Get value of attribute in Angularjs custom directive

From Dev

AngularJs: How to get the attribute value of a attribute type directive

From Dev

AngularJs: How to get the attribute value of a attribute type directive

From Dev

Are angularJS directive names unique (or not)?

From Dev

Attribute directive in AngularJS

From Dev

How to get attribute value in template in angularjs custom directive?

From Dev

get the argument of directive function attribute and change it in another contoller angularjs

From Dev

AngularJS only characters directive

From Dev

AngularJS directive, Call service by directive attribute

From Dev

AngularJS directive as attribute - change array in directive

From Dev

AngularJS : Directive not picking up attribute

From Dev

Attribute without value in AngularJS directive

From Dev

AngularJS: Add attribute, compile directive

From Dev

AngularJS - Use attribute directive conditionally

From Dev

How to bind an attribute in a AngularJS directive?

From Dev

Check existence of attribute in AngularJs Directive

From Dev

AngularJS : directive watch attribute expression

From Dev

AngularJS: How to monitor an attribute in a directive?

From Dev

angularjs nested directive with changing attribute

From Dev

angularjs custom directive repeat attribute

From Dev

Check existence of attribute in AngularJs Directive

From Dev

How to create a Attribute Directive to insert another attribute directive in a element in AngularJS

From Dev

get directive attribute defined in HTML in directive controller

From Dev

Can one directive have different names in angularjs?

From Dev

How can I get pass value from controller back to directive's template attribute in AngularJS?

From Dev

How can I get pass value from controller back to directive's template attribute in AngularJS?

From Dev

angularjs directive binding name attribute to template element

Related Related

  1. 1

    Get value of attribute in Angularjs custom directive

  2. 2

    AngularJS Directive: Get Object from Attribute

  3. 3

    Get value of attribute in Angularjs custom directive

  4. 4

    AngularJs: How to get the attribute value of a attribute type directive

  5. 5

    AngularJs: How to get the attribute value of a attribute type directive

  6. 6

    Are angularJS directive names unique (or not)?

  7. 7

    Attribute directive in AngularJS

  8. 8

    How to get attribute value in template in angularjs custom directive?

  9. 9

    get the argument of directive function attribute and change it in another contoller angularjs

  10. 10

    AngularJS only characters directive

  11. 11

    AngularJS directive, Call service by directive attribute

  12. 12

    AngularJS directive as attribute - change array in directive

  13. 13

    AngularJS : Directive not picking up attribute

  14. 14

    Attribute without value in AngularJS directive

  15. 15

    AngularJS: Add attribute, compile directive

  16. 16

    AngularJS - Use attribute directive conditionally

  17. 17

    How to bind an attribute in a AngularJS directive?

  18. 18

    Check existence of attribute in AngularJs Directive

  19. 19

    AngularJS : directive watch attribute expression

  20. 20

    AngularJS: How to monitor an attribute in a directive?

  21. 21

    angularjs nested directive with changing attribute

  22. 22

    angularjs custom directive repeat attribute

  23. 23

    Check existence of attribute in AngularJs Directive

  24. 24

    How to create a Attribute Directive to insert another attribute directive in a element in AngularJS

  25. 25

    get directive attribute defined in HTML in directive controller

  26. 26

    Can one directive have different names in angularjs?

  27. 27

    How can I get pass value from controller back to directive's template attribute in AngularJS?

  28. 28

    How can I get pass value from controller back to directive's template attribute in AngularJS?

  29. 29

    angularjs directive binding name attribute to template element

HotTag

Archive