AngularJS directive for storing DOM elements and redirecting on form submit

Question

I am getting into AngularJS, and I've been trying to understand directives because they are pretty much mandatory if you want to work with the DOM (when using AngularJS, correct me if I'm wrong). So here is the scenario, I am trying to create a simple login system (I am actually using the MEAN stack - MongoDB, ExpressJS, AngularJS, NodeJS). I'm not too worried about security (or otherwise less than perfect code) because I am just trying to learn how to use the frameworks. Here is the relevant code:

MemberModule.js:

var MemberModule = angular.module('MemberModule', ['ui.bootstrap']);

MemberModule.controller('MemberListController', function ($scope, $html)) {
  $scope.members = [];
  $scope.newMember = {
    done : false
  };

  $scope.doneFilter = { done : true };
  $scope.notDoneFilter = { done : false };

  //various methods...

});

MemberModule.directive('usernameDir', ['$interval', function($interval) {
  function link(scope, element, attrs) {
    var newMember,
        timeoutId;


    function updateUsername() {
      element.text(scope.newMember.username);
    }

    scope.$watch(attrs.myCurrentTime, function(value) {
      format = value;
      updateTime();
    });

    element.on('$destroy', function() {
      $interval.cancel(timeoutId);
    });

    // start the UI update process; save the timeoutId for canceling
    timeoutId = $interval(function() {
      UpdateTime(); // update DOM
    }, 1000);
  }

  return {
    link: link
  };
});

MemberModule.directive('passwordDir', function () {
  // The above name 'myDirective' will be parsed out as 'my-directive'
  // for in-markup uses.
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      'sub' : '&ngSubmit'
    },
    template: 'home'
  }
});

As you can see above, I created the main angular.module and called it MemberModule - which gets referenced in my HTML (I am using jade templates - so by HTML I mean layout.jade). After that I created the controller with its various methods that I need. Finally, I created the directives which is what I need help with. I am trying to assign a DOM input element (in a form) to an object attribute, and then redirect (or render) a jade template (home.jade).

The relevant form HTML ('index.jade'):

extends layout

block content
  div.container(ng-controller="MemberListController", ng-init="setMembers( #{JSON.stringify(members)} )")
    h1 Welcome
    h2 Sign Up
    form(novalidate, ng-submit="addNewMember()")
      input( type="text", username-dir info="userdir")
      br
      input( type="password", password-dir info="passdir")
      br
      input( type="password" )
      br
      button.btn.btn-primary(class="sub", type="submit") Submit
    h2 Adding...
      span(username dir)
      span(password dir)

I am just pasting what I have so far so you can see where I am at in terms of progress. I am fully aware that my code is not functional as is - I am just looking for some help in pointing out what needs to go where to accomplish my goal. I realize that the two directives (while trying to attain the same goal) are not using the same style of directive code - this is just because of where I am at in terms of trying things. Again, my goal is (specifically for the username and password):

I am trying to assign a DOM input element (in a form) to an object attribute, and then redirect (or render) a jade template (home.jade).

Thanks.

Answer 1

Big ups to Julian Hollmann (check comments):

"You don't need both directives at all. Just use ng-model (docs.angularjs.org/api/ng/directive/ngModel) to bind your scope data to the input elements. Then use ng-submit to call a function in the controller."

Bingo - thanks!