Getting element ID attribute from passed scope/element?

Question

I'm trying to grab an ID attribute from the input field on change.

myApp.controller('OnChangeController', ['$scope', function($scope) {
    $scope.Change = function(e) {
        //alert(e);
        $scope.output = e.$attr;
    }
}]);

    <div ng-controller="OnChangeController">
        <input ng-model="change" id="ChangeID1" ng-change="Change(this)"> {{ output }}
        <input ng-model="change" id="ChangeID2" ng-change="Change(this)"> {{ output }}
    </div>

How to grab the element's ID attribute?

Why do you need id and that too in a controller? `$scope to jQuery object` ? scope is not a DOM element.. What do you mean by jquery object anyways? I believe you are completely missing the concept of using angular — PSL, Sep 17 '14 at 01:41
[Try this](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background).. — PSL, Sep 17 '14 at 01:50
Some peoeple may want reuse vanilla javascript functions pre written that take ids as parameters instead of having to rewrite them — Keith Beard, Aug 18 '15 at 13:20

HelpNeeder · Accepted Answer · 2014-09-17T04:22:42.270

I wanted my ID, darn it :P

Here's nice, pointless, directive to get it.

I was writing code based on this example: http://jsfiddle.net/simpulton/E7xER/

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script>
            var firstApp = angular.module('firstApp', []);
            firstApp.directive('myFirstApp', function() {
                var variable = function(scope, element, attrs) {
                    var elemArray = element.children();
                    $.each(elemArray, function() {
                        $(this).on('click', function() {
                            var id = $(this).attr("id");
                            alert(id);
                        });
                    });
                };
                return {
                    restrict: 'AEC',
                    link: variable
                };
            });
        </script>
    </head>
    <body ng-app="firstApp">
        <my-first-app>
            <button id="a1">button 1</button>
            <button id="a2">button 2</button>
        </my-first-app>
        <br />
        <my-first-app>
            <button id="b1">button 1</button>
            <button id="b2">button 2</button>
        </my-first-app>
    </body>
</html>

Getting element ID attribute from passed scope/element?

1 Answers1