Используя компоненты angular-dart, предоставьте собственные экземпляры вместо вызова конструктора

В angular-dart можно создавать свои собственные компоненты, как показано на здесь. Если вы используете собственные теги в html, например:

<rating></rating>

angular создаст компонент, вызвав конструктор класса, связанного с рейтингом, в данном случае new RatingComponent () (если я не ошибаюсь).

Я знаю, что вы можете добавлять атрибуты для некоторого контроля над ним, но мне было интересно, можно ли предоставить свои собственные экземпляры вместо вызова конструктора angular. Что делать, если у меня есть список кнопок в главном контроллере, как добиться чего-то вроде этого:

<div ng-repeat='b in ctrl.buttonList'>
    <fancy-button instance='b'></fancy-button>
</div>

У меня такое чувство, что я упускаю что-то очевидное, но я поискал все вокруг и не нашел ответа.

edit (для дополнительных пояснений): я думаю, это сводится к тому, можете ли вы или не можете повлиять / обойти вызов конструктора с помощью angular. Если бы речь шла только о создании html, его легко не использовать компонент и просто сгенерировать html с помощью основного контроллера (как показано ниже), но, если возможно, я хотел бы использовать компонент, поскольку он также имеет shadow-dom для песочницы CSS.

<div ng-repeat='b in ctrl.buttonList'>
    <input type='button' class='fancy' value='{{b.label}}'></input>
</div>

person jdv145    schedule 09.12.2013    source источник
comment
Класс, отвечающий за fancy-button, может проверять атрибут instance и делать switch над его значением и делать разные вещи. В качестве другой возможности вы (возможно) могли бы объявить компонент, который запускается при определенных значениях атрибута экземпляра. @NgComponent('selector':'fancy-button[instance=unicorn]', …) class MyUnicornButton { … } (ссылка на (java; (doc goo.gl/j0tYCg) и попросите процессор angular разобраться в этом размышление.Если это вроде того, что вы имеете в виду, и если вам интересно, я могу попробовать это и опубликовать примеры, если что-то из этого сработает.   -  person user7610    schedule 28.12.2013


Ответы (1)


Вы хотите что-то вроде

<div ng-bind-html='ctrl.html'></div>

Таким образом, вы можете предоставить HTML-код контроллером.

Вам нужно будет создать свою собственную реализацию NgBindHtmlDirective (всего несколько строк), потому что используемый NodeValidator из ng-bind-html не поддерживает настраиваемые теги (пока).

Может быть, есть более изощренные способы, но я еще не очень хорошо знаю Angular.

=== Редактировать ===

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

Используя ng-bind-html, вы можете создать разметку с помощью кода, если во время разработки вы не знаете, какой тип тега вы хотите использовать.

person Günter Zöchbauer    schedule 09.12.2013
comment
Возможно, я вас не понимаю, но instance - это то, что я придумал, чтобы прояснить свое намерение. Afaik нет такого атрибута, чтобы предотвратить вызов конструктора angular. - person jdv145; 09.12.2013
comment
Извините, первый ответ не подошел к вопросу. Я отредактировал ответ. Хотя, вероятно, есть более эффективные способы сделать это. - person Günter Zöchbauer; 09.12.2013
comment
В любом случае спасибо за попытку. Я специально ищу способ обойти вызов конструктора. Если это невозможно, я думал о предоставлении angular аргумента для использования в конструкторе фабрики. Тогда конструктор фабрики может просто вернуть сам аргумент. Но это, конечно, очень уродливое решение, и я все равно не знаю, как повлиять на вызов конструктора с помощью angular. - person jdv145; 09.12.2013
comment
Я не уверен, как использование ng-bind-html может помочь, если я сам не сгенерирую весь html. - person jdv145; 09.12.2013
comment
Я думал, что вы можете генерировать теги и атрибуты во время выполнения, которые приведут к желаемому вами поведению. Может быть, вы могли бы привести более конкретный пример того, чего вы хотите достичь. Мои знания Angular и представление о том, что с ними можно делать, все еще очень ограничены: - | - person Günter Zöchbauer; 09.12.2013
comment
Я добавил изменить в стартовом сообщении, чтобы объяснить, почему я хочу использовать компонент - person jdv145; 09.12.2013