Есть ли простой способ расширить директиву атрибута в angularjs?

Question

Есть ли простой способ расширить директиву атрибута в angularjs?

0

Я хочу создать пользовательский ng-if но не могу найти хороших примеров того, как это должно быть сделано.

Я нацелен на то, что:

<div my-if="someText">....</div>

Я хочу, чтобы это

<div ng-if="true|false">....</div>

где true|false зависит от someText. Есть простой способ сделать это?

Tomas Jansson 22 март 2016, в 16:17

Источник

1

почему бы вам не вызвать функцию над самой директивой ng-if , которая будет определять значение true/false как ng-if="check()" и тогда функцией будет $scope.check = function(){ return someText == 'something' }
Pankaj Parkar 22 март 2016, в 15:02
0

Я хочу использовать его для переключения функций, поэтому я хочу более простой способ написать toggle-if="mytogglename" .
Tomas Jansson 22 март 2016, в 15:06
0

ng-if ОЧЕНЬ сложно расширять / повторно использовать ... ng-show проще, так как вы можете использовать display:none и свернуть свой собственный ...
malix 22 март 2016, в 15:06
1

... и в дополнение к тому, что пишет Pankaj Parkar выше, вы можете использовать одноразовые привязки, чтобы исключить часы, если вам это нужно: ng-if="::check()" . Это полезно для переключения функций.
Nikos Paraskevopoulos 22 март 2016, в 15:09
0

Вы хотите show/hide или generate/destroy используя вашу директиву?
Shaishab Roy 22 март 2016, в 15:09
0

Я думаю, что функция в порядке. Если вы так хотите, чтобы ваш код выглядел простым, возможно, стоит посмотреть, как какой-то прекомпилятор заменит my-if = "test" на ng-if = "'test' == 'кое-что"?
Petr Averyanov 22 март 2016, в 15:52
0

@malix, я бы не пошел так далеко, чтобы сказать, что это ОЧЕНЬ сложно, см. мой собственный ответ ниже: stackoverflow.com/a/36174574/280693 . Вы просто должны знать, что делать.
Tomas Jansson 23 март 2016, в 09:44
0

На самом деле, я знаю, что ОЧЕНЬ слишком сильно, но я имел в виду, что в нем много подводных камней и проблем с производительностью ...
malix 02 апр. 2016, в 23:08

Показать ещё 6 комментариев

Теги:

angularjs

2 ответа

-2

<div ng-if="showText ? true : false">....</div>

но опять же, если ваш showText является логическим, он будет делать то же самое.

z.a. 22 март 2016, в 12:48

1

Ты даже не пытаешься ответить на мой вопрос.
Tomas Jansson 22 март 2016, в 15:07
0

вы говорите "где истина | ложь зависит от некоторого текста". Вы можете попытаться задать лучший вопрос.
z.a. 22 март 2016, в 15:36
0

Я думаю, я сделал это совершенно ясно. В зависимости от значения, предоставленного моей директиве, я хочу, чтобы это расширилось до ng-if соответствует этому значению.
Tomas Jansson 23 март 2016, в 09:37
0

Правильно, отсюда и постоянный поток ответов :) Я до сих пор не понимаю варианта использования для этого. Если это ng-if вложено в директиву my-if, вы можете в любом случае передать логическую переменную. В противном случае, если по другой директиве, то просто используйте события.
z.a. 23 март 2016, в 09:42
0

SomeText не является логической переменной. Это некоторый текст, который я хочу использовать, чтобы определить, должен ли я быть истинным или ложным, решенным некоторой логикой. В моем примере решения логика проста, чтобы проиллюстрировать это. Я буду использовать его для переключения функций приложения.
Tomas Jansson 23 март 2016, в 18:25

Показать ещё 3 комментария

Ещё вопросы

почему бы вам не вызвать функцию над самой директивой ng-if , которая будет определять значение true/false как ng-if="check()" и тогда функцией будет $scope.check = function(){ return someText == 'something' }
Я хочу использовать его для переключения функций, поэтому я хочу более простой способ написать toggle-if="mytogglename" .
ng-if ОЧЕНЬ сложно расширять / повторно использовать ... ng-show проще, так как вы можете использовать display:none и свернуть свой собственный ...
... и в дополнение к тому, что пишет Pankaj Parkar выше, вы можете использовать одноразовые привязки, чтобы исключить часы, если вам это нужно: ng-if="::check()" . Это полезно для переключения функций.
Вы хотите show/hide или generate/destroy используя вашу директиву?
Я думаю, что функция в порядке. Если вы так хотите, чтобы ваш код выглядел простым, возможно, стоит посмотреть, как какой-то прекомпилятор заменит my-if = "test" на ng-if = "'test' == 'кое-что"?
@malix, я бы не пошел так далеко, чтобы сказать, что это ОЧЕНЬ сложно, см. мой собственный ответ ниже: stackoverflow.com/a/36174574/280693 . Вы просто должны знать, что делать.
На самом деле, я знаю, что ОЧЕНЬ слишком сильно, но я имел в виду, что в нем много подводных камней и проблем с производительностью ...
Ты даже не пытаешься ответить на мой вопрос.
вы говорите "где истина | ложь зависит от некоторого текста". Вы можете попытаться задать лучший вопрос.
Я думаю, я сделал это совершенно ясно. В зависимости от значения, предоставленного моей директиве, я хочу, чтобы это расширилось до ng-if соответствует этому значению.
Правильно, отсюда и постоянный поток ответов :) Я до сих пор не понимаю варианта использования для этого. Если это ng-if вложено в директиву my-if, вы можете в любом случае передать логическую переменную. В противном случае, если по другой директиве, то просто используйте события.
SomeText не является логической переменной. Это некоторый текст, который я хочу использовать, чтобы определить, должен ли я быть истинным или ложным, решенным некоторой логикой. В моем примере решения логика проста, чтобы проиллюстрировать это. Я буду использовать его для переключения функций приложения.

Tomas Jansson · Accepted Answer · 2016-03-23T08-07-00.000Z

Чтобы заменить директиву ng-if требуется перекомпиляция. Самый простой способ заставить его работать:

(function () {
   angular.module('enheter').directive('toggleIf',['$compile', function($compile) {
            return {
                restrict: 'A',
                compile: function(el,attr) {
                    var toggleName = attr.toggleIf;
                    var toggleOn = toggleName === "sometext";
                    el.attr('ng-if', toggleOn);
                    el.removeAttr('toggle-if');
                    var fn = $compile(el);
                    return function(scope) {
                        fn(scope);
                    };
                }
            };
        }]); 
})();

Директива выше сначала получает значение атрибута toggleIf. Часть, определяющая значение toggleOn будет более сложной, но это показывает, к чему я стремился. Затем я просто добавляю ng-if к элементу и удаляю toggle-if. Если toggle-if не был удален, будет бесконечный цикл, так как вызов функции $compile будет выполнять эту функцию снова и снова.

Отлично сделано ... Вы проверяли это в ng-repeat?