Блог

Я хочу, чтобы моя пользовательская директива, такая как директива angular, поддерживала required опцию, поэтому я ссылался ngModel в директиве. но ему не нравятся другие директивы, у которых нет ng-dirty класса при запуске, пока вы что-то не введете.

Что я могу сделать?

Мой код JSFiddle

HTML-код:

 <div ng-app="myDemo" ng-controller="myDemoCtrl">
    <div>{{name}}</div>
    <ul>
        <li ng-repeat="item in items track by $index">{{item}}</li>
    </ul>
    <form>
        <input type="text" required ng-model="name">
        <list ng-model="items" required></list>
    </form>
</div>
  

Код CSS

 form .ng-invalid.ng-dirty {
    border: 1px solid red;
}
form .demo-list.ng-invalid.ng-dirty {
    border: none;
}
form .demo-list.ng-invalid.ng-dirty input {
    border: 1px solid red;
}
  

JS-код:

 angular.module('myDemo', []).controller('myDemoCtrl', function($scope) {
    $scope.name = '';
    $scope.items = undefined;
}).directive('list', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        require: '?ngModel',
        template: '<div class="demo-list"><input type="text" ng-model="addItems"></div>',
        link: function(scope, element, attrs, ngModelCtrl) {
            if (!ngModelCtrl) {
                return;
            }

            ngModelCtrl.$isEmpty = function(value) {
                return !(angular.isArray(value) amp;amp; value.length > 0);
            };

            ngModelCtrl.$formatters.push(function(modelValue) {
                return angular.isArray(modelValue) ? modelValue : [];
            });

            ngModelCtrl.$render = function() {
                scope.addItems = ngModelCtrl.$viewValue.join(',');
            };

            scope.$watch('addItems', function() {
                var newList = scope.addItems.length == 0 ? [] : scope.addItems.split(',');
                ngModelCtrl.$setViewValue(newList);
            });
        }
    };
});
  

Обновить

это работает, код JSFiddle