Question

我正在进入AngularJS，我一直在尝试理解指令，因为如果你想使用DOM（当使用AngularJS时它们是非常强制性的，请纠正我，如果我错了）。所以这是场景，我正在尝试创建一个简单的登录系统（我实际上正在使用MEAN堆栈 - 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模板 - 所以{{1}我的意思是HTML）。之后我用我需要的各种方法创建了layout.jade。最后，我创建了指令，这是我需要帮助的。我试图将DOM输入元素（在表单中）分配给对象属性，然后重定向（或渲染）玉石模板（controller）。

相关表单HTML（＆＃39; index.jade＆＃39;）：

home.jade

我只是粘贴到目前为止所拥有的东西，所以你可以看到我在进步方面的位置。我完全清楚我的代码不能正常运行 - 我只是在寻找一些帮助，指出需要去哪里实现我的目标。我意识到这两个指令（在尝试达到相同的目标时）并没有使用相同风格的指令代码 - 这只是因为我在尝试的方面所处的位置。同样，我的目标是（特别是用户名和密码）：

我正在尝试将DOM输入元素（在表单中）分配给对象属性，然后重定向（或渲染）玉石模板（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)）。

感谢。

Answer 1

朱利安·霍尔曼的大人物（查看评论）：

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

宾果 - 谢谢！

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

1 个答案: