Question

我的组件代码：

(function () {
  'use strict';

  function SubscribeController(toaster, EmbHTTPFactory) {
    var ctrl = this;

    ctrl.submit = function () {
      EmbHTTPFactory.subscribeToNewsletter(ctrl.email).then(function (res) {
        toaster.pop('success', "User successfully subscribed");
      },function (err) {

      });
    }
  }

  var app = angular.module('24hourdigitizing'),
      config = {
        templateUrl: "app/views/components/form-component.html",
        controller: ['toaster', 'ng24hdDigitizing.factories.EmbHTTPFactory', SubscribeController],
        bindings: {
          label: '<',
          button: '<',
          action: '<',
          classname: '<'
        }
      };

  app.component('formComponent', config);

}());

模板HTML

<div class="container">
        <div class="row">
            <form action="" name="formElement" class="form-element">
                <div class="form-group no-margin">
                    <label for="email" ng-if="$ctrl.label">{{ $ctrl.label }}</label>
                    <div class="">
                        <input class="form-control input-lg"
                               type="text"
                               id="email"
                               name="email"
                               ng-modal="$ctrl.email"
                               placeholder="Email..."
                               ng-required="true"
                        >
                    </div>
                    <button
                            type="button"
                            class="btn btn-primary btn-lg"
                            ng-disabled="formElement.$invalid"
                            ng-click="$ctrl.submit()"
                    >{{ $ctrl.button }}</button>
                </div>
            </form>
        </div>
    </div>

问题：据我所知，$ ctrl.email应该是一个双向绑定变量。但每当我提交表格时，我都会得到不确定。在代码中，ctrl.email未定义。

任何人都可以解释我是否在做错了吗？

Answer 1

有拼写错误，应该是

ng-model="$ctrl.email"

而不是ng-modal

Angular Component双向绑定不起作用

1 个答案: