AngularJS Widget/Plugin via Directive

Question

I'm working on a relatively small web portal running on top of Angular. I'm still an Angular greenhorn, though I've managed to wrap my mind around the more important concepts.

In any event, I was creating a small widget/plugin for GitHub data retrieval. This is my code,

ng-github.js

(function() {

  angular.module('ng-github', [])
    .run(function() {
      console.log('module instantiated');
    })
    .directive('git-user', function($http) {
      return function(scope, element, attr) {
        console.log('invoked');
        $http.get('https://api.github.com/users/' + attr['gitUser'])
          .success(function(data) {
            scope.gUser = data;
          })
          .error(function(data, status) {
            console.error('Github User Request Error', status, data);
          })
      };
    })

})();

view.html

...

<span gitUser="neetVeritas" ng-bind="gUser.following"></span>

...

The module is being instantiated, as I'm getting a response from the .run(...) function, but the directive's link function is not being invoked. I've included the ng-github module in my main application, and I'm not receiving any angular-js related errors, so I'm stumped here. Any ideas?

You have the mixed the casing of the names: do module(...).directive('gitUser', ...) and use it as <span git-user="...">. I.e.: directive definition in code: camelCase, directive usage in HTML: dash-case. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jan 7, 2016 at 23:18

cirrusio · Accepted Answer · 2016-01-07 23:21:29Z

2

Looks to me as if you have the naming of the directive backwards. Shouldn't the name be camelcase (i.e. gitUser) in the directive declaration and hyphenated in the html?

answered Jan 7, 2016 at 23:21

cirrusio

5905 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Widget/Plugin via Directive

ng-github.js

view.html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

ng-github.js

view.html

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related