Question

我见过许多人使用HTML和指令组合来创建AngularJS表单(like here)的示例，但我正在尝试创建一个独立的小部件，其中包含templateURL中表单的所有HTML指令的字段，所以我可以将这一行指令插入另一个HTML文件并有一个表单。有什么建议吗？

Answer 1

以下是plnkr with directive examples that bring the form和更新按钮/回调作为示例。

我这样定义我的指令;当表单很简单时我使用了模板：

angular.module('components', [])
  .directive('myForm', function() {
    return {
      restrict: 'E',
      template: `<form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    E-mail: <input type="email" ng-model="user.email" /><br />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>`,
      link: function(scope, element, attr) {
        scope.update = function(user) {
          console.log('update ' + JSON.stringify(user));
        }
      }

    }
  });

因此，该指令带来了表单，我定义了一个函数＆＃39; update＆＃39;我已经调用了提交按钮。该函数在控制台中显示一条消息...例如：

update {"name":"john doe","email":"john@doe.doe"}

应用程序的其余部分没有任何内容：

angular.module('HelloApp', ['components'])
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.name = 'This is the controller';
  }]);

HTML看起来像这样：

<body>
  <div ng-controller="MyCtrl">
    <my-form></my-form>
  </div>
</body>

如果你想使用templateUrl，我有另一个如下定义的指令：

  .directive('myFormExternal', function() {
    return {
      restrict: 'E',
      templateUrl: 'myFormExternal.html',
      link: function(scope, element, attr) {
        scope.updateExternal = function(user) {
          console.log('External Form: ' + JSON.stringify(user));
        }
      }

    }
  });

表格html是：

<form novalidate class="simple-form">
    Firstname: <input type="text" ng-model="external.firstname" /><br />
    Lastname: <input type="text" ng-model="external.lastname" /><br />
    <input type="submit" ng-click="updateExternal(external)" value="Save" />
  </form>

希望这会有所帮助。请告诉我们。

是否可以将整个表单放入一个AngularJs指令中？

1 个答案: