Javascript 用于存储DOM元素并在表单提交时重定向的AngularJS指令

我正在学习AngularJS，我一直在努力理解指令，因为它们是强制性的，如果您想在使用AngularJS时使用DOM，请纠正我的错误。下面是一个场景，我试图创建一个简单的登录系统，实际上我使用的是MEAN-stack-MongoDB、ExpressJS、AngularJS、NodeJS。我不太担心安全性或不太完美的代码，因为我只是想学习如何使用这些框架。以下是相关代码：

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'
  }
});

正如您在上面所看到的，我创建了主angular.module，并将其命名为MemberModule——在我的HTML中引用它，我使用的是jade模板——因此，HTML指的是layout.jade。之后，我创建了控制器及其各种方法，我需要。最后，我创建了我需要帮助的指令。我试图将表单中的DOM输入元素分配给对象属性，然后重定向或呈现jade模板home.jade

相关表单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)

我只是在粘贴我到目前为止所拥有的，这样你就可以看到我在进步方面所处的位置。我完全意识到我的代码并没有发挥应有的功能——我只是在寻找一些帮助，指出需要做什么才能实现我的目标。我意识到，这两个指令在试图达到相同目标的同时，并没有使用相同风格的指令代码——这只是因为我在尝试方面所处的位置。同样，我的目标是专门针对用户名和密码：

我试图将表单中的DOM输入元素分配给对象属性，然后重定向或呈现jade模板home.jade

---

谢谢。

向朱利安·霍尔曼致敬检查意见：

---

您根本不需要两个指令。只需使用ng model docs.angularjs.org/api/ng/directive/ngModel将范围数据绑定到输入元素。然后使用ng submit调用控制器中的函数

---

宾果-谢谢

您根本不需要两个指令。只需使用ng模型将范围数据绑定到输入元素。然后使用ng submit调用控制器中的函数。@Julian Hollmann cool-你能在回答中告诉我怎么做吗？@JulianHollman正在查看链接-我想我可以从中找到答案-非常感谢-如果你愿意，你可以发布一个回答示例。欢迎你。另一个小提示：在我看来，angular适用于单页应用程序。你现在做的有点奇怪。首先在后端渲染模板，然后在前端使用angular再次渲染它们。@JulianHollmann yah-谢谢你的提示-我有点明白了。这也是我的另一个问题…我是否在某处使用express'res.render？那我该怎么办呢？如果需要，我可以粘贴更多代码