несколько директив на 1 элемент

Учитывая, что у меня есть следующие две директивы.

1: Выбор пользовательского интерфейса Angular — эта директива использует изолированную область.

2: myDirective — в моей пользовательской директиве я также использую изолируемую область для доступа к значению ngModel.

Я получаю сообщение об ошибке «Несколько директив не может совместно использовать изолировать область». Вот как я объявляю область изоляции в своей директиве.

 require: 'ngModel',           
            scope: {
                modelValue: "=ngModel"
            },
            link: function (scope, el, attrs, ctrl) {

И я использую его как:

<ui-select myDirective  multiple ng-model="GroupsModel" theme="select2" ng-disabled="disabled" style="width: 300px;" hidden-text-box ">
        <ui-select-match placeholder="groups">{{$item}}</ui-select-match>
        <ui-select-choices repeat="color in Groups ">
            {{color}}
        </ui-select-choices>
    </ui-select>

Мой вопрос в том, как я могу получить доступ к значению ngmodel из моей пользовательской директивы, если несколько директив нельзя использовать вместе для 1 элемента, есть ли обходной путь, который по-прежнему сохранит привязку?

Обновлено

Я не могу получить доступ к требуемому значению моделей ng в следующей функции моей директивы, если я не использую пустой scope: {},

scope.reset = function () {

                            var modelValue =ctrl.$viewValue;

                            $timeout(function () {
                                el[0].focus();
                            }, 0, false);
                        };

Вот моя директива:

var app = angular.module('app');
app.directive('resetField', [
        '$compile', '$timeout', '$http', function ($compile, $timeout, $http) {
            return {
                require: 'ngModel',                                
                link: function (scope, el, attrs, ctrl) {

                    // compiled reset icon template
                    var template = $compile('<i ng-show="enabled" ng-mousedown="reset()" class="fa fa-floppy-o" style="padding-left:5px"></i>')(scope);
                    el.after(template);

                    scope.reset = function () {

                        var modelValue =ctrl.$viewValue;

                        $timeout(function () {
                            el[0].focus();
                        }, 0, false);
                    };

                    el.bind('input', function() {
                            scope.enabled = !ctrl.$isEmpty(el.val());
                        })
                        .bind('focus', function() {
                            scope.enabled = !ctrl.$isEmpty(el.val());
                            scope.$apply();
                        })
                        .bind('blur', function() {
                            scope.enabled = false;
                            scope.$apply();
                        });
                }
            };
        }
    ]);

angularjs angular-directive angularjs-scope
person joe    schedule 19.10.2015    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Если вы используете изолированную область только для получения ng-модели для выбора, вы можете сделать это без использования изолированной области.

В функции ссылки просто используйте scope[attrs.ngModel], вы даже можете понаблюдать за ней (пока ngmodel является свойством объекта ng-model=obj.prop1)

person Chandermani    schedule 19.10.2015
comment
Я обновил свой вопрос своей директивой, не могли бы вы взглянуть, пожалуйста? - person joe; 19.10.2015

arrow_upward
0
arrow_downward

Вы можете использовать несколько директив для одного элемента, проблема в том, что применение нескольких изолированных областей действия к одному элементу недопустимо, вы можете использовать require требует другую директиву в myDirective:

angular.directive('myDirective', [function(){

    return {
        scope: false,
        require: 'ngModel',
        link: function(scope, element, attr, ctrl){

            scope.modelValue = ctrl.$viewValue;

        }
    }

}])
person MarkoCen    schedule 19.10.2015
comment
Извините, есть еще один случай, который я не упомянул. MyDirective иногда используется без нескольких директив. учитывая это, будет ли ваше решение работать? - person joe; 19.10.2015

arrow_upward
0
arrow_downward

Используйте «require» в директиве, чтобы получить доступ к контроллеру другой директивы. Затем вы можете внедрить этот контроллер в параметры реализации директив. Однако в этом случае вы не сможете использовать изолированную область.

person Keith James    schedule 19.10.2015

arrow_upward
0
arrow_downward

если вам нужно использовать две директивы, убедитесь, что вторая директива не является изолированной.

person Prashant Sharma    schedule 19.10.2015
comment
Но иногда мне нужно использовать myDirective без другой директивы. Как я могу получить доступ к значению ngmodel без области изоляции в этом случае? - person joe; 19.10.2015
comment
Область, которую вы будете использовать, будет принадлежать контроллеру, в котором находится элемент. Вы можете изменить переменные в соответствующих контроллерах. - person Prashant Sharma; 19.10.2015
comment
Я обновил свой вопрос своей директивой, не могли бы вы взглянуть, пожалуйста? - person joe; 19.10.2015
comment
если вы используете обычную директиву, а не изолированную, у вас есть доступ к области контроллера, в которой находится директива, поэтому вам не нужно определять область. областью действия этой директивы является область действия контроллера представления, в котором используется директива. У вас есть прямой доступ к GroupsModel - person Prashant Sharma; 20.10.2015