лея-TextField не принимая ngModel изменения во внимание

Question

я столкнулся вопрос о поведении 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; 
}; 
}); 

Надеется, что это достаточно ясно. Я попытался отправить, что на GitHub материала конструкции облегченного думая, что это была ошибка, но я стартовал здесь ... Спасибо

Answer 1

Когда значение mdl-textfield__input «s ng-model устанавливаются после того, как компонент лей зарегистрирован, mdl-textfield не получает класс is-dirty, поэтому он не ведет себя так, как должен.

Вы можете использовать эту директиву на вашем `леи-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); 

})(); 

Answer 2

Вы должны вручную очистить MDL текстовых материалов расслоения плотного, если очищаются с помощью сценариев. После очистки входного значения, например, вызовите это 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); 
    }