3

(function() {
	'use strict';
	angular.module('peoplePickerCombo', []);
	angular.module('peoplePickerCombo')
		.directive('peoplePicker',	function() {
			return {
				restrict: 'E'
				,require: 'ngModel'
				,scope : {
					 ngDisabled 			: '=?'
					,placeholder			: '@'
					,secondaryPlaceholder	: '@'
					,users					: '=ngModel'
					,maxChips				: '@'
					,minChips				: '@'
					,service				: '&'
					,required				: '@'
				}
				//,templateUrl : './resources/module/combo/people-picker/people-picker.template.html'
				,template : '<div class="md-chip-container md-block" ng-class="{there : !users.length}" flex>\
								<label ng-if="!!users.length">{{placeholder}}</label>\
								<md-chips\
									readonly="ngDisabled || readonly"\
									aria-label="{{placeholder}}"\
									class="custom-chips"\
									secondary-placeholder="{{secondaryPlaceholder}}"\
									md-max-chips="{{maxChips}}"\
									ng-model="users"\
									md-autocomplete-snap\
									md-require-match="true"\
									md-separator-keys="[13,186]">\
										<md-autocomplete\
											md-menu-class="md-contact-chips-suggestions"\
											md-selected-item="selectedUser"\
											md-search-text="searchText"\
											md-items="item in comboCtrl.userLookupService(searchText)"\
											md-item-text="comboCtrl.itemText(item)"\
											md-no-cache="true"\
											ng-disabled="ngDisabled || (users.length==maxChips)"\
											md-floating-label="{{users.length ? (users.length==maxChips?\'\':secondaryPlaceholder) : placeholder}}"\
											md-autoselect>\
												<div class="md-contact-suggestion">\
													<!-- <img ng-init="getPic(item)"\
												ng-src="{{item.Picture}}"\
												alt="{{item.DisplayName}}"\
													/> -->\
													<span\
														class="md-contact-name"\
														md-highlight-text="userSearchText"\
														md-highlight-flags="ig">\
															{{item.DisplayName}}\
													</span>\
													<span class="md-contact-email">{{item.Email}}</span>\
												</div>\
										</md-autocomplete>\
										<md-chip-template>\
											<div class="md-contact-avatar">\
												<img data-ng-src="{{$chip.PictureURL}}" />\
											</div>\
											<div class="md-contact-name">{{$chip.DisplayName}}</div>\
										</md-chip-template>\
										<button md-chip-remove class="md-primary rchip">\
											<!--<md-icon md-font-set="material-icons"> close </md-icon>-->x\
										</button>\
								</md-chips>\
							</div>'
				//,replace : true
				,link: function(scope, element, attrs, ctrl) {
					//debugger;
					scope.users = scope.users || [];
					//scope.userLookupService
					
					//scope[attrs.ngModel] = scope.users;
					
					if (angular.isDefined(attrs.ngDisabled) ) {
	                    scope.$watch('ngDisabled', function(isDisabled) {
	                        scope.ngDisabled = isDisabled;
	                    });
	                }
					
					/*ctrl.$validators.atleast = function(modelValue,viewValue) {
	      				console.log(modelValue , viewValue)
	      				return !!(modelValue && modelValue.length>0);
	      			};
					
					scope.$watch('users.length',function(newVal,oldVal){
						ctrl.$validate();
	            	});*/



					//If provided with an array of user ids, Guess by string
					if(scope.users && scope.users.length){
						var s = scope.service();
						angular.forEach(scope.users,function(obj,idx){
							if(angular.isNumber(obj)){
								s(obj).then(function(r){
									scope.users[idx] = r[0];
								});
							}
						});
					}
					
				}
				,controller : ['$scope', '$timeout', '$q', function($scope, $timeout, $q){
					var vm = this;

					vm.itemText = function(item){
						return item.DisplayName;
					};


					vm.userLookupService = $scope.service();
					
					//If provided with an array of nbk ids, Guess by string
					if($scope.users && $scope.users.length){
						angular.forEach($scope.users,function(obj,idx){
							if(angular.isString(obj)){
								vm.userLookupService(obj).then(function(r){
									$timeout(function(){
										$scope.users[idx] = r[0];
									});
								});
							}
						});
					}
				}]
				,controllerAs : 'comboCtrl'
			};
		});
	
	angular.module('peoplePickerCombo')
		.directive('required', function() {
	        return {
	            restrict: "A",
	            require: 'ngModel',
	            link: function(scope, element, attrs, ctrl) {
	            	if (!ctrl) {
	            		return false;
	      			}
	      			ctrl.$validators.required = function(modelValue,viewValue) {
	      				//console.log(modelValue , viewValue)
	      				return !!( modelValue && modelValue.length>0 );
	      			};
	            }
	        }
	    });
	
})();
/* Styles go here */

/*people-picker*/

people-picker md-autocomplete md-autocomplete-wrap md-progress-linear {
  bottom: -12px !important;
}
people-picker md-input-container {
  bottom: 10px !important;
  min-width: 400px !important;
}
people-picker md-chip {
  position: relative !important;
  padding: 0 20px 0 1px !important;
  box-shadow: 1px 1px 1px #888;
}
people-picker .customMessages {
  color: rgb(221, 44, 0);
  font-size: 12px;
  overflow: hidden;
  -webkit-transition: all .3s cubic-bezier(.55, 0, .55, .2);
  transition: all .3s cubic-bezier(.55, 0, .55, .2);
  opacity: 1;
  margin-top: 0;
  padding-top: 5px;
}
people-picker .md-chips md-chip .md-contact-avatar {
  float: left;
}
people-picker .md-chips md-chip .md-contact-avatar img {
  height: 32px;
  border-radius: 16px;
}
people-picker .md-chips md-chip .md-contact-name {
  padding: 0 5px;
}
people-picker md-chip .md-chip-remove-container {
  position: absolute !important;
  right: 4px !important;
  top: 4px;
  margin-right: 0;
  height: 24px;
}
people-picker md-chip .md-chip-remove-container button.rchip {
  position: relative;
  height: 24px;
  width: 24px;
  line-height: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  transition: background 0.15s linear;
  display: block;
}
people-picker md-chip .md-chip-remove-container button.rchip md-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(0.7);
  color: white;
  fill: white;
}
people-picker md-chip .md-chip-remove-container button.rchip:hover,
people-picker md-chip ._md-chip-remove-container button.rchip:focus {
  background: rgba(255, 0, 0, 0.8);
}
people-picker md-chip md-chip-template {
  /*padding-right: 4px;*/
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}
people-picker > .md-chip-container > label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.38);
  /*label which is shown when user is selected | Not Secondary Placeholder*/
}
people-picker md-input-container label {
  font-size: 14px;
  /*placeholder and secondary placeholder*/
}
people-picker[required] .md-chip-container.there > label::after,
people-picker[required] .md-chip-container.there md-input-container label::after {
  content: ' *';
  font-size: 13px;
  vertical-align: top;
}
/* Not using this one
people-picker .md-chip-container md-chips-wrap::before{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 90%;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
	padding-left: 0px;
	padding-right: 0;
	z-index: 1;
	-webkit-transform: translate3d(0,28px,0) scale(1);
	transform: translate3d(0,28px,0) scale(1);
	transition: -webkit-transform .4s cubic-bezier(.25,.8,.25,1);
	transition: transform .4s cubic-bezier(.25,.8,.25,1);
	max-width: 100%;
	-webkit-transform-origin: left top;
	transform-origin: left top;
	position:absolute;
	color: rgba(0,0,0,0.38);
	content : attr(label);
	font-size:15px;
}

people-picker .md-chip-container md-chips-wrap.md-focused::before
,people-picker .md-chip-container md-chips.ng-dirty md-chips-wrap::before
,people-picker .md-chip-container md-chips.ng-not-empty md-chips-wrap::before{
	-webkit-transform: translate3d(0,-108px,0) scale(.80);
	transform: translate3d(0,-108px,0) scale(.80);
	transition: -webkit-transform cubic-bezier(.25,.8,.25,1) .4s,width cubic-bezier(.25,.8,.25,1) .4s;
	transition: transform cubic-bezier(.25,.8,.25,1) .4s,width cubic-bezier(.25,.8,.25,1) .4s;
}

people-picker .md-chip-container md-chips-wrap.md-focused::before{
	color:rgb(63,81,181);
}

people-picker .md-chip-container md-chips-wrap.md-readonly::before{
	-webkit-transform: translate3d(0,-11px,0) scale(1);
	transform: translate3d(0,-11px,0) scale(1);
}*/

people-picker .md-chip-container md-chips-wrap.md-readonly {
  box-shadow: none;
  border-bottom: 1px dotted #CCC;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" />
  <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css" />

</head>

<body>
  <div ng-app="app" ng-cloak>
    <form novalidate name="pForm" ng-controller="MainCtrl as ctrl">
      <md-content layout-padding>
        <div style="background: #abcdef;">
          This one doesn't throw error on empty even when required directive and $validator is programmed, Why
        </div>
        <div>
          <people-picker required name="user" ng-disabled="false" service="ctrl.userLookupService" max-chips="10" placeholder="User" secondary-placeholder="Add Another?" ng-model="ctrl.users" aria-label="Users"></people-picker>
          <div ng-messages="pForm.user.$error" class="customMessages">
            <div ng-message="required">User is required</div>
            <div ng-message="resolve">One or more users have not been resolved</div>
          </div>
        </div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div style="background: #abcdef;">
          Below one (Title) throws error on blur if empty | Error Goes away if valid | works even with keystrokes
        </div>
        <div>
          <md-input-container class="md-block" flex>
            <input type="text" placeholder="Title" aria-label="Title" required name="title" ng-model="ctrl.Title">
            <div ng-messages="pForm.title.$error">
              <div ng-message="required">Title is required</div>
            </div>
          </md-input-container>
        </div>
        <div>
          <md-button type="submit">Submit</md-button>
        </div>
      </md-content>
    </form>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
  <!--<script src="people-picker.directive.js"></script>-->
  <script>
    (function() {
      'use strict';
      angular.module('app', ['peoplePickerCombo', 'ngMaterial', 'ngMessages']);
      angular.module('app')
        .controller('MainCtrl', ['$scope', '$timeout', '$q',
          function($scope, $timeout, $q) {
            var vm = this;
            vm.users = [34, 89, 55];

            //Simulate a service
            vm.userLookupService = function(q) {
              var d = $q.defer();
              //debugger;
              $timeout(function() {
                var list = ["Beast BoyChangeling", "Phantom Stranger", "Vril Dox", "The Shade", "Robotman", "Captain Atom", "Elongated Man", "Amanda Waller", "Green Lantern", "Adam Strange", "Deadman", "Atom", "Nightwing", "Demeain Dark", "Elijah Snow", "Sandman", "Cyborg", "Ra’s Al Ghul", "Raven", "Hitman", "Jimmy Olsen", "Dr. Mahhattan", "Midnighter", "Lobo", "Alfred Pennyworth", "Brainiac 5", "Static", "Big Barda", "Catman", "The Riddler", "Doctor Fate", "Wildcat", "Black Adam", "Two-Face", "Mister Miracle", "Green Lantern", "Plastic Man", "Firestorm", "Starfire", "Batgirl", "Red HoodRobin", "Bigby Wolf", "Poison Ivy", "SpeedyArsenalRed Arrow", "Jonah Hex", "Yorick Brown", "Spectre", "Green Lantern", "Deathstroke", "Commisioner James Gordon", "Death", "Spider Jerusalem", "The Question", "Lois Lane", "Blue Beetle", "Flash", "Deadshot", "Supergirl", "Question", "Jesse Custer", "Huntress", "Animal Man", "Donna Troy", "Sinestro", "ImpulseKid Flash", "Harley Quinn", "Batwoman", "Batgirl", "Hawkman", "Darkseid", "Starman", "Zatanna", "Blue Beetle", "Sandman", "Catwoman", "Swamp Thing", "Captain Marvel", "Green Lantern", "Martian Manhunter", "Aquaman", "Rorschach", "Black Canary", "Power Girl", "Superboy", "John Constantine", "Lex Luthor", "Robin", "Booster Gold", "Green Lantern", "Green Arrow", "Barbara Gordon", "Flash", "Tim Drake", "Wonder Woman", "Flash", "Green Lantern", "Joker", "Dick Grayson", "Superman", "Batman"];
                list = list.map(function(a, i) {
                  return {
                    UserName: i,
                    DisplayName: a,
                    Email: a.replace(/[^\w]/gi, '').toLowerCase() + '@dccomics.com',
                    PictureURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAdVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA268pkAAAAJnRSTlMAAAICBAgMFhwmKjA4QFJUWFxeYm6Zm6urrbvBx8/X2dvf3+/9/fI9ls0AAACsSURBVCiRbdDZDoMgEAXQcau7uCsuoFX5/08stlACcp8m9yRkBgCZEq8rLsGMP7FvJt+Alom0eu8eEg5Xg4j9E2mQK8g1QAqQBqmCVIPgkv0V6Gv1EnrjjlDse4Tm6Qm9e5qYPcCr6rrqZZRuvY3xPcTjVqvTHUT4KyfBmJx8IMgRq87MyPxbuTV78cXe/oTd41A8e8YKDosNFoDM1jOWwWCHAYgdCDT0bQltPkJILs0IxHsZAAAAAElFTkSuQmCC'
                  }
                });
                var r = new RegExp(q, 'ig');
                var response;
                if (angular.isNumber(q)) {
                  response = [list[q]];
                } else response = (list.filter(function(a) {
                  return r.test(a.DisplayName);
                }).slice(0, 10));
                d.resolve(response);
              }, 100);
              return d.promise;
            };

          }
        ]);
    }());
  </script>
</body>

</html>

在 Plunkr 中添加:https ://plnkr.co/edit/1LgFCNqT0YDkyUAaC31C和上面提供的代码片段。

上面的页面代码段中描述了一些问题。

描述:指令people-pickcer在我们在标签中搜索时带来了用户,md-autocomplete并且在选择某些内容时会转换为MD-Chip并将其添加到父母中md-chips。当所有芯片都被移除时,它应该抛出验证错误<div ng-message="required">User is required</div>

用法:

<div>
   <people-picker 
        required name="user" ng-disabled="false" service="ctrl.userLookupService" 
        max-chips="5" placeholder="User" secondary-placeholder="Add Another?" 
        ng-model="ctrl.users" aria-label="Users"></people-picker>
   <div ng-messages="pForm.user.$error" class="customMessages">
       <div ng-message="required">User is required</div>
       <div ng-message="resolve">One or more users have not been resolved</div>
    </div>
</div>

问题: 如果您看到“标题”输入框,只要输入无效,就会引发错误。我尝试为我的模块编写一个$validators但它永远不会触发,当我删除任何 md-chip 时它也会触发所有验证(我认为它会在删除任何芯片时尝试提交表单)。尝试在不触摸 Title 输入框的情况下删除 md-chip,您将看到验证器已为 Title 触发,如果我从选择中删除任何 md-chip,则如果有更多带有验证的输入字段将全部触发。

required来自我的模块的指令

angular.module('peoplePickerCombo')
    .directive('required', function() {
        return {
            restrict: "A",
            require: 'ngModel',
            link: function(scope, element, attrs, ctrl) {
                if (!ctrl) {
                    return false;
                }
                ctrl.$validators.required = function(modelValue,viewValue) {
                    //console.log(modelValue , viewValue)
                    return !!( modelValue && modelValue.length>0 );
                };
            }
        }
    });

预计在移除所有 md 芯片时它应该会引发错误,但它永远不会引发任何错误。

4

2 回答 2

1

这是因为指令变异数组,而 value(array) 永远不会改变。

例如,您可以将以下 $watch 添加到您的指令中:

scope.$watch(function(){
 return ctrl.$modelValue && ctrl.$modelValue.length;  
}, function(){
 ctrl.$validate();
});
于 2016-10-09T11:51:31.327 回答
1
  1. 让我们将人员选择器组合的required指令重命名为ppcRequired,否则它将应用于任何其他必需的输入。人物选择器看起来像

    <people-picker ppc-required 
                   name="user" 
                   service="ctrl.userLookupService" 
                   max-chips="10" 
                   placeholder="User" 
                   secondary-placeholder="Add Another?" 
                   ng-model="ctrl.users"  
                   aria-label="Users"></people-picker>
    <div ng-messages="(pForm.$submitted || pForm.user.$touched) && pForm.user.$error" class="customMessages">
      <div ng-message="required">User is required</div>
      <div ng-message="resolve">One or more users have not been resolved</div>
    </div>
    
  2. 由于所需的验证器未在模型更改时运行(https://github.com/angular/material/issues/8126),让我们使用$watch来触发所需的更改:

    angular.module('peoplePickerCombo').directive('ppcRequired',   function() {
      return {
        restrict: "A",
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          if (!ngModelCtrl) {
            return false;
          }
    
          // override $isEmpty function
          ngModelCtrl.$isEmpty = function (val) {
            return !val || !val.length;
          };
    
          // add required validator
          ngModelCtrl.$validators.required = function(modelValue) {
            return !ngModelCtrl.$isEmpty(modelValue);
          };
    
          // watch for changes
          scope.$watch(attrs.ngModel, function (nVal, oVal) {
            if (nVal && nVal !== oVal) {
              // run validations
              ngModelCtrl.$$runValidators(nVal, oVal, function () {});
              // update css classes
              ngModelCtrl.$setTouched();
              ngModelCtrl.$$updateEmptyClasses(nVal);
            }
          }, 1);
        }
      }
    });
    
  3. 另外 2 个标题输入被MD标记为无效,但它们仍然没有被触动,所以我们添加 CSS 类 md-touched,它只会在触碰字段或提交表单时出现:

    <md-input-container class="md-block" 
                        ng-class="{'md-touched': pForm.title.$touched || pForm.$submitted}" 
                        flex>
      <input type="text" 
             placeholder="Title" 
             aria-label="Title" 
             required 
             name="title" 
             ng-model="ctrl.Title">
      <div ng-messages="(pForm.$submitted || pForm.title.$touched) && pForm.title.$error">
        <div ng-message="required">Title is required</div>
      </div>
    </md-input-container>
    
  4. 添加一些CSS:

    md-input-container.md-touched.md-input-invalid label.md-required::after,
    md-input-container.md-touched.md-input-invalid label.md-required,
    people-picker.ng-invalid-required md-input-container label,
    people-picker.ng-invalid-required md-input-container.md-input-focused label {
      color: rgb(221, 44, 0);
    }
    md-input-container.md-input-invalid label.md-required::after,
    md-input-container.md-input-focused label.md-required::after,
    md-input-container.md-input-has-value label.md-required::after,
    md-input-container.md-input-invalid label.md-required {
      color: rgba(0, 0, 0, 0.54);
    }
    md-input-container.md-touched.md-input-invalid .md-input {
      border-color: rgb(221, 44, 0);
    }
    md-input-container.md-input-invalid .md-input {
      border-color: rgba(0, 0, 0, 0.12);
    }
    people-picker.ng-invalid-required md-chips .md-chips {
      box-shadow: 0 1px rgb(221, 44, 0);
    }
    people-picker + .customMessages [ng-message] {
      font-size: 12px;
      line-height: 14px;
      margin-top: 0;
      opacity: 1;
      overflow: hidden;
      padding-top: 5px;
      transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) 0s;
      color: rgb(221, 44, 0);
    } 
    [ppc-required] md-input-container label::after {
      content: " *";
      font-size: 13px;
      vertical-align: top;
    }
    

plunker:https ://plnkr.co/edit/43HOJRJ6WsAqnbvHONVl?p=preview

于 2016-10-09T21:35:57.460 回答