3

我正面临关于mdl-textfield的行为的问题

在下面的 plnkr 上，按照以下步骤操作：

  1. 点击“工作组”
  2. 单击一项上的“复制”
  3. 看看最后出现的新文本字段与 ngModel 关联（angular.copy）但是文本字段的行为很奇怪，即使有一个值，标签也不会浮动，但是如果您单击文本字段，它会按预期浮动. 如果您修改该字段，则行为仍然存在，但如果您在没有任何修改的情况下退出它，则标签会返回覆盖。

http://plnkr.co/edit/MUI2iBslIH9jd4fgEQPL?p=preview

ngView内容

<div data-ng-controller="MainCtrl">
  <section data-ng-repeat="fo in foo">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" id="sample1" data-ng-model="fo.bar"/>
      <label class="mdl-textfield__label" for="sample1">{{fo.bar}}</label>
      <span ng-if="$last" ng-init="update()"></span>
    </div>
    <button ng-click="focopy(fo)">Copy</button>
  </section>
    <div data-ng-show="datacopy.edit" class="input-field">
      <input type="text" id="ex1" data-ng-model="datacopy.bar" />
      <label for="ex1">label</label>
    </div>
</div>

角模块

var app=angular.module('plunker', ['ngRoute'])
app.config(function($routeProvider){
    $routeProvider
    //Root URL
    .when('/',{template:'<p>Coucou</p>'})
    .when('/groups',{templateUrl:'groups.html'})
    .when('/groupsnotworking',{templateUrl:'groupsnotworking.html'})
});

app.controller('MainCtrl', function($scope,$timeout) {
$scope.foo = [
  {bar: 'world'},{bar:'toto'},{bar:'toto'}
];
$scope.groups=$timeout(function(){
  $scope.groups=$scope.foo
},1000);
$scope.update=function(){
  componentHandler.upgradeAllRegistered();
};
$scope.datacopy={};
$scope.focopy=function(data){
  $scope.datacopy=angular.copy(data);
  $scope.datacopy.edit=true;
};
});

希望它足够清楚。我试图将其发布在 Material Design lite 的 github 上，认为这是一个错误，但我在这里被踢了...谢谢

4

3 回答 3

3

在注册 mdl 组件后设置mdl-textfield__input'ng-model值时，mdl-textfield不会获得is-dirty类，因此不会按应有的方式运行。

您可以在 `mdl-textfield__input 字段上使用此指令：

"use strict";
(function(){
  let mdlTfFix = () => {
    return {
      restrict: "C",
      require: "ngModel",
      link: ($scope, $element, $attrs, ngModelCtrl) => {
        $scope.$watch(() => {
          return ngModelCtrl.$modelValue;
        }, (newVal, oldVal) =>{

          if(typeof newVal !== "undefined" && newVal !== "" && newVal !== oldVal){
            $element.parent().addClass("is-dirty");
          }
          else{
            $element.parent().removeClass("is-dirty");
          }
        });
      }
    };
  };

  mdlTfFix.$inject = [];
  app.directive("mdlTextfieldInput", mdlTfFix);

})();
于 2016-11-24T08:37:07.250 回答
0

如果通过脚本清除，您必须手动清除 MDL js 文本输入。例如，清除输入值后，调用 this mdlCleanup();。

  //MDL Text Input Cleanup
  function mdlCleanUp(){
    var mdlInputs = doc.querySelectorAll('.mdl-js-textfield');
    for (var i = 0, l = mdlInputs.length; i < l; i++) {
      mdlInputs[i].MaterialTextfield.checkDirty();
    }  
  }
于 2016-12-30T17:23:59.337 回答
0

和我一起工作。希望这可以帮到你

function CleanMDL() {
        setTimeout(function () {
            $scope.$apply(function () {
                var x = document.getElementsByClassName("mdl-js-textfield");
                var i;
                for (i = 0; i < x.length; i++) {
                    x[i].MaterialTextfield.checkDirty();
                }
            })
        }, 100);
    }
于 2018-02-06T03:50:48.103 回答