cannot get the attribute of html tag in angular

Question

I want o get the value of and attribute in my angular controller but it is undefined. If it helps everything is inside an MVC.net application.

The simplified codes:

TestCtrl.js:

angular.module('CMM')
    .controller('TestCtrl', ['$scope', '$element', '$attrs', function ($scope, elem, $attrs) {
        $scope.name = "mohsen";
        $scope.api = $attrs.api;
        alert($attrs.api);
        alert(elem.data('api'));
        console.log('hi, I am here');
    }]);

app.js:

var app = angular.module('CMM', ['ngRoute','slServices', 'slControllers', 'ngAnimate', 'smart-table', 'ui.bootstrap']);
.....

usage:

<div id="content" ng-controller="TestCtrl">
    <h3>
        <input type ="text" ng-model="name"/>
        <input type="text" ng-model="api" api="/sl/asdf"/>
         ....

only way element would be exposed is if your controller was part of a "component" or ""directive"*. You should not be concerned what is in the dom at all in a normal controller. Read the ngModel docs — charlietfl
– charlietfl, Commented Oct 23, 2016 at 23:29
Could you explain a little about what you're trying to accomplish? A controller should not be used to interact with DOM; that is what you do with a directive. Directives can expose and/or consume controllers, so that may be what you need to do, but it will be easier to advise if you can give more detail. — Jack A.
– Jack A., Commented Oct 23, 2016 at 23:52
@charlietfl I want to pass the api address from the directive template to the controller. So I'm testing it simply here. — Mohsen Kamrani
– Mohsen Kamrani, Commented Oct 24, 2016 at 0:05
@JackA. I want to ultimately create a directive which passes an api address to the controller which uses http.get to fetch the required data. Finally I can consume that data in ng-repeat inside the directive. Anyway, I have no success to make it work, and that's my main problem. — Mohsen Kamrani
– Mohsen Kamrani, Commented Oct 24, 2016 at 0:07
It sounds like you want a directive and a service that will fetch the data. I don't see a need for a controller in that use case. — Jack A.
– Jack A., Commented Oct 24, 2016 at 0:11

Jack A. · Accepted Answer · 2016-10-24 00:55:55Z

1

Your code is not working as written because $element and $attrs are not injectable. As discussed in the comments, you can use a directive to get access to the attributes and reference the controller from the directive. This is not really the proper way to do this, but it can be made to work.

So your controller could expose a method that is used to provide it with the API value from the directive, like this:

.controller("TestCtrl", function ($scope) {
    this.SetApi = function (api) {
    $scope.api = api;
  };
})

And your directive can reference the controller and call the method to supply the value, like this:

.directive("getApi", function () {
    return {
    controller: "TestCtrl",
    link: function (scope, element, attr, controller) {
      controller.SetApi(attr.api);
    }
  };
});

Here is a working example: https://jsfiddle.net/n5t6pfcc/

answered Oct 24, 2016 at 0:55

Jack A.

4,5631 gold badge28 silver badges38 bronze badges

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

1 Comment

Mohsen Kamrani Over a year ago

Thanks, it's working and more important, now I know the mechanism better. By the way, it would be great if you provide a link or briefly explain that why those services are not injectable.

Collectives™ on Stack Overflow

cannot get the attribute of html tag in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related