更新來自模型的輸入時的事件Angular

Question

我有一個指令，我把類型輸入的類。 我添加了blur，focus事件來知道我什麼時候進入並退出輸入以產生標籤（Material Design）的效果，但是當我通過角度ng模型包裝值時，我需要知道該字段已填充。

有什麼想法？

app.directive('formControl', function() { 
    return { 
    restrict: 'C', 
    link: function (scope, element, attrs) { 

     // Add class filled to form-control's that have a value 
     if(element.val()){ 
     element.parent().addClass('filled'); 
     } 

     // Any event here that can tell me that the value was changed by the angular so I can put the css class 

     element.bind('blur', function (e) { 
     input = angular.element(e.currentTarget); 
     if(input.val()){ 
      input.parent().addClass('filled'); 
     } else { 
      input.parent().removeClass('filled'); 
     } 
     input.parent().removeClass('active'); 
     }).bind('focus', function (e) { 
     input = angular.element(e.currentTarget); 
     input.parent().addClass('active'); 
     }); 

    } 
    }; 
}); 

Answer 1

，而不是添加綁定內filled類的，你可以添加一個觀察者，並添加類。請參考下面的例子。使用類中的顏色來表示它們被添加。

var app = angular.module('myApp', []); 
 

 
app.controller('MyController', ['$scope', MyController]);  
 

 
function MyController($scope) { 
 
    $scope.name = 'World'; 
 
    $scope.name2 = 'hello'; 
 
} 
 
app.directive('formControl', function() { 
 
    return { 
 
    restrict: 'C', 
 
    require: 'ngModel', 
 
    link: function (scope, element, attrs, ngModel) { 
 

 
     // Add class filled to form-control's that have a value 
 
     if(ngModel.$viewValue){ 
 
     element.parent().addClass('filled'); 
 
     } 
 

 
     // Any event here that can tell me that the value was changed by the angular so I can put the css class 
 
     element.bind('blur', function (e) { 
 
     input = angular.element(e.currentTarget); 
 
     input.parent().removeClass('active'); 
 
     }).bind('focus', function (e) { 
 
     input = angular.element(e.currentTarget); 
 
     input.parent().addClass('active'); 
 
     }); 
 
     scope.$watch(function(){return ngModel.$viewValue;}, function(newValue){ 
 
     if('required' in attrs){ 
 
      if(newValue){ 
 
      element.parent().addClass('filled'); 
 
      } else { 
 
      element.parent().removeClass('filled'); 
 
      } 
 
     } 
 
     }) 
 

 
    } 
 
    }; 
 
});

.filled{ 
 
    background-color:lightblue; 
 
} 
 
.active{ 
 
    border:1px solid red; 
 
}

<div ng-controller='MyController' ng-app="myApp"> 
 
    <label> The below input does not have required attribute</label> 
 
    <input type="text" class="form-control" ng-model="name"> 
 
    <br> 
 
    <br> 
 
    <label> The below input has required attribute</label> 
 
    <input type="text" class="form-control" required ng-model="name2"> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

此外，如果你想顯示你一樣在ng-messages如何看到錯誤消息。

var app = angular.module('myApp', []); 
 

 
app.controller('MyController', ['$scope', MyController]);  
 

 
function MyController($scope) { 
 
    $scope.name = 'World'; 
 
    $scope.name2 = 'hello'; 
 
} 
 
app.directive('formControl', function() { 
 
    return { 
 
    restrict: 'C', 
 
    require: 'ngModel', 
 
    link: function (scope, element, attrs, ngModel) { 
 

 
     // Add class filled to form-control's that have a value 
 
     if(ngModel.$viewValue){ 
 
     element.parent().addClass('filled'); 
 
     } 
 

 
     // Any event here that can tell me that the value was changed by the angular so I can put the css class 
 
     element.bind('blur', function (e) { 
 
     input = angular.element(e.currentTarget); 
 
     input.parent().removeClass('active'); 
 
     }).bind('focus', function (e) { 
 
     input = angular.element(e.currentTarget); 
 
     input.parent().addClass('active'); 
 
     }); 
 
     scope.$watch(function(){return ngModel.$viewValue;}, function(newValue){ 
 
     if('required' in attrs){ 
 
      if(newValue){ 
 
      element.parent().addClass('filled'); 
 
      } else { 
 
      element.parent().removeClass('filled'); 
 
      } 
 
     } 
 
     }) 
 

 
    } 
 
    }; 
 
});

.filled{ 
 
    background-color:lightblue; 
 
} 
 
.active{ 
 
    border:1px solid red; 
 
} 
 
div.filled > .error-message{ 
 
    display:none; 
 
} 
 
div:not(.filled) > .error-message{ 
 
    display:block; 
 
} 
 
.error-message{ 
 
    text-align:center; 
 
    margin-top:5px; 
 
}

<div ng-controller='MyController' ng-app="myApp"> 
 
    <label> The below input does not have required attribute</label> 
 
    <input type="text" class="form-control" ng-model="name"> 
 
    <br> 
 
    <br> 
 
    <label> The below input has required attribute</label> 
 
    <input type="text" class="form-control" required ng-model="name2"> 
 
    <div class="error-message"> This Field is required</div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

我希望這能解決您的問題:)