Directive not loading

Question

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>

lenilsondc · Accepted Answer · 2019-11-04T12:26:37.307

6

The problem with your code is that your IIFE isn't being invoked ever, you created the function but never called 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');}
        }
      }
    ]);
})();

edited Nov 04 '19 at 12:26

answered Nov 19 '16 at 00:08

lenilsondc

9,590
2
25
40

And again, something so simple, why is it awlays like this. Thanks a lot – Felipe Deguchi Nov 19 '16 at 00:11
By having IIFE, you can be certain you are not polluting the global namespace. You can check out more about it in [this answer](http://stackoverflow.com/a/8228308/7153181). – Ryota Nov 19 '16 at 00:26

Directive not loading

1 Answers1