Felipe Deguchi Felipe Deguchi - 18 days ago 5
AngularJS Question

Directive not loading

I`m having some problem with my directive.

The js files for the directive and the controller are included in index.html and the path is correct.
No errors are given in the console, but my tag doesn`t render. Any help would be apreciated.
Here are some of my code

loginForm.js

(function () {
angular
.module('sysConApp')
.directive('loginForm', [
function () {
return {
restrict: 'E',
scope: {},
templateUrl: 'scripts/directives/loginForm/view/loginFormView.html',
controller: 'LoginFormController',
replace: 'true'
}
}
]);
});


loginFormController.js

angular.module('sysConApp')
.controller('LoginFormController', ['$scope', '$state', 'AuthService', 'userProfile',
function ($scope, $state, AuthService, userProfile) {/*Some codes*/}]);


loginFormView.html

<form class="loginForm">
<img class="login-logo"
src="data:image/png;base64,i..." alt="Logo SysCon">
<input id="inputEmail"
type="email"
class="form-control"
placeholder="E-mail"
ng-model="username"
required
autofocus>
<input type="password"
id="inputPassword"
ng-model="password"
class="form-control"
placeholder="Senha"
required>
<span ng-show="loginError && loginForm.$invalid"
class="label label-danger">
<b>Erro ao realizar login.</b> Favor tente novamente.
</span>
<button class="btn btn-lg btn-block btn-signin"
ng-disabled="loginForm.$invalid"
ng-class="{'btn-default':loginForm.$invalid,'btn-success':loginForm.$valid}"
ng-click="logIn()"
type="submit">
Log in
</button>
</form>


login.html

<div class="card card-container">
<login-form></login-form>
</div>

Answer

The problem with your code is that your IIFE isn't being invoked ever, you are only creating the function but never call it.

You have this:

(function() {
//...
});

And you must change it to:

(function() {
//...
})();

Full code:

(function() {
  angular
    .module('sysConApp')
    .directive('loginForm', [
      function() {
        return {
          restrict: 'E',
          scope: {},
          templateUrl: 'scripts/directives/loginForm/view/loginFormView.html',
          controller: 'LoginFormController',
          replace: true,
          link: function(){console.log('whoray');}
        }
      }
    ]);
})();