How to get the value of a custom attribute in angular js

Question

I have created a custom attribute called test in angular js. When I write the test attribute just beside the ng-controller keyword i.d.

<div ng-controller="myCon" test="abc"></div> then I can access that test from the controller by using alert($attrs.test). But if I write the custom attribute test other than beside of the ng-controller keyword, I can't access that. i.e.

<div ng-controller="myCon"> <div test="def"></div> </div>

In this case I got undefined in alert($attrs.test)

Full code...

<html>
<script src="angular.min.js"></script>
<body ng-app="myApp">

<div ng-controller="kumar" >
 <button ng-click="check()" test="def">Click</button>
</div>

 <script>
 var app = angular.module("myApp", []);
 app.directive("test", function() {
  return {
    //template : "<h1>Hello</h1>"
  };
});

 app.controller("kumar",function($scope,$attrs){
    $scope.check=function(){
      alert(JSON.stringify($attrs.test));   //getting undefined. I 
                      //should get def.
  }
});
</script>

</body>
</html>

That attribute will be accessible only to the controller of test directive — ayushgp, Apr 02 '17 at 10:13
button is in the div where ng-controller is written. So I think button is under that controller — Scott Hunter, Apr 02 '17 at 10:18
Button is in that controller but the directive's attribute is not. To allow parent to access this you'll need to give the parent access to its child's scope. Read about it [here](https://github.com/angular/angular.js/wiki/Understanding-Scopes) — ayushgp, Apr 02 '17 at 10:20

score 3 · Answer 1 · edited May 23 '17 at 11:54

3

app.directive("test", function() {
  return {
     restrict: "A",
        scope: {
            text: "@test"
        }
  };
});

Update your directive scope and add restrict . For better understanding refer to this question

edited May 23 '17 at 11:54

Community

1
1

answered Apr 02 '17 at 10:26

Abdullah Al Noman

2,817
4
20
35

score 0 · Answer 2 · answered Apr 02 '17 at 10:16

You can check it:

<html>
<script src="src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js""></script>
<body ng-app="myApp">

<div ng-controller="kumar" >
 <button ng-click="check()" test="def">Click</button>
</div>

 <script>
 var app = angular.module("myApp", []);
 app.directive("test", function() {
  return {
    //template : "<h1>Hello</h1>"
  };
});

 app.controller("kumar",function($scope,$attrs){
    $scope.check=function(){
    var testa=$scope.test;
      alert(JSON.stringify(testa));   //getting undefined. I 
                      //should get def.
  }
});
</script>

</body>
</html>

score 0 · Answer 3 · answered Apr 02 '17 at 10:50

You can get the element on click if you pass $event in ng-click, i.e. ng-click="check($event)" and can get the attribute from $event.target.

Check fiddle : https://jsfiddle.net/ayusharma/xb63g9ca/

JS

app.controller('myCtrl', function($scope) {
   $scope.clickMe = function(evt) {
     console.log(evt.target.getAttribute('test'))
   }
});

HTML

<div ng-controller="myCtrl">
   <div ng-click="clickMe($event)" test="abc">Click on Me</div>
</div>

How to get the value of a custom attribute in angular js

3 Answers3