Question

我正面临有关mdl-textfield行为

的问题

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

点击＆＃34;工作组＆＃34;
点击＆＃34;复制＆＃34;在一个项目
看看最后出现的新文本字段与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>

Angular模块

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;
};
});

希望它足够清楚。我试图在材料设计精简版的github上发布它认为这是一个错误，但我已经开始在这里...... 谢谢

Answer 1

如果在注册mdl组件后设置mdl-textfield__input的{{1}}值，则ng-model不会获得mdl-textfield类，因此不按照应有的方式行事。

您可以在`mdl-textfield__input字段：

上使用此指令

is-dirty

Answer 2

如果通过脚本清除，则必须手动清理MDL js文本输入。例如，清除输入值后，请调用此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();
    }  
  }

Answer 3

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

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);
    }

mdl-textfield未将ngModel更改纳入帐户

3 个答案: