Question

我试图了解到底发生了什么。

我有一个带有Angular Material的表单，如：

<div layout-gt-sm="row">
  <md-input-container class="md-block" flex-gt-sm>
    <label>First name</label>
    <input ng-model="user.firstName">
  </md-input-container>
  <md-input-container class="md-block" flex-gt-sm>
    <label>Last Name</label>
    <input ng-model="theMax">
  </md-input-container>
</div>

... onfocus和onblur effecs +输入布局已满。

在此工作之后，我将表单更改为使用指令，表单开始如下：

<div layout-gt-sm="row" class="core no-padding-bottom">
    <!-- effect working -->
    <md-input-container class="md-block" flex-gt-sm>
        <md-icon><i class="material-icons">email</i></md-icon>
        <input type="text" name="asd" placeholder="asd">
    </md-input-container>
    <!-- effect not working -->
    <input-test name="name"></input-test>
</div>

...指令模板：

<md-input-container class="md-icon-float md-block" flex-gt-sm md-no-float>
    <md-icon class="material-icons">
        <i class="material-icons">{{ attrs.icon }}</i>
    </md-icon>
    <input
        type="text"
        name="{{ attrs.name }}">
    <div ng-messages="form[attrs.name].$error" role="alert">
        <div ng-message="server">{{ form[attrs.name].$error.serverMessage }}</div>
    </div>
</md-input-container>

......指令：

app.directive('inputTest', function($injector, $q, $location) {
  return {
    replace: true,
    restrict: 'AE',
    scope: {
      model: '=',
      form: '='
    },
    templateUrl: baseViewPath('directives/form/text.html'),
    link: function($scope, $element, $attrs) {
      $scope.attrs = $attrs;
      $scope.mask = function() {
        if(typeof $attrs.mask !== 'undefined') {
          return $attrs.mask;
        }
      };
    }
  };
});

现在，表单工作率为50％，已发送并验证，但屏幕上没有材质效果且没有完整字段。

那可能是什么？

更新

我认为我已经修复了＃34;将占位符更改为标签

<label>{{ attrs.placeholder }}</label>

为什么使用指令我松散了材质效果？

0 个答案: