mdl-textfield没有将ngModel更改考虑在内 [英] mdl-textfield not taking ngModel changes into account

问题描述

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

I am facing an issue regarding the mdl-textfield's behavior

在下面的plnkr中，步骤：

On the below plnkr, follow the steps:

1. 点击工作组


2. 点击一个项目上的复制看看最后的新文本框与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;
};
});

希望很清楚。
我试图在物料设计的github上发贴，认为这是一个错误，但我已经被踢了这里...
谢谢

Hope it is clear enough. I tried to post that on the github of material design lite thinking it was a bug, but I have been kicked off here... Thank you

推荐答案

当您 mdl-textfield__input 的 ng-model 在注册mdl组件后设置值， mdl-textfield 不会得到 is-dirty 类，因此

When you an mdl-textfield__input's ng-modelvalue is set after the mdl component is registered, the mdl-textfield does not get the is-dirty class, thus does not behave the way it should.

您可以在mdl-textfield__输入字段上使用此指令：

You can use this directive on your `mdl-textfield__input field :

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

})();

这篇关于mdl-textfield没有将ngModel更改考虑在内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！