2013-05-30 3 views
3

Я пишу халат в качестве личного проекта, чтобы узнать/узнать больше об AngularJS.Как я могу установить директиву AngularJS условно?

Я попытался выполнить общую реализацию, поэтому у меня есть общий частичный код, который показывает квадратную сетку и общий контроллер со всей реальной логикой игры, находящейся в сервисе. Я написал одну такую ​​услугу для каждой игровой платы, которую я реализовал (в настоящее время 2). Единственное, что я не могу решить в общем виде, это ячейка в сетке. В зависимости от игры, ее содержимое может быть буквой, числом, рисунком или даже некоторым (довольно сложным) HTML. Я мог бы использовать функцию геттера, которая вызовет службу, которая будет собирать HTML для каждой ячейки, но это действительно не так - Угловое. Так что я думал об определении директивы для каждого типа ячеек. Как разместить условную ссылку на странице (в зависимости от типа игры, определенного в контроллере)?

Если вы можете придумать более элегантное решение, которое не требует этой хакерской вещи, я был бы рад услышать его.

+0

Делают ли содержимое плитки в зависимости от игры или отдельной плитки? –

+0

Эй, Майк, Итак, например, tic-tac-toe, у вас будет 3 типа контента: X, 0, пустая строка. Для реверсирования вы должны иметь форму div в виде белых/черных кругов или ничего. Для шахмат у вас будет сложный контент с изображением фигурки и пролета с его именем или ничего. – Endre

ответ

3

Я думаю, у меня есть довольно хорошее решение для этого. Создайте HTML-макет пользовательских интерфейсов для каждой из двух игр, которые у вас есть на данный момент. Соедините клетки, стили, изображения и т. Д. Они не должны быть идеальными, но они должны приблизиться к тому, как вы видите, что они строятся.

Теперь попробуйте унифицировать HTML-код, чтобы они были как можно ближе к обложкам, и эта общность должна предлагать вам, какие части вам нужны для передней части. Например, скажем, вы сделали очень скучную старую игру, такую ​​как «Шахматы» (а не что-то интересное, например, «Король Токио» или «Каркассон» :)), и вы видите, что у вас есть отдельные квадраты, которые прекрасно работают как div.

<table> 
    <tr ng-repeat="row in board"> 
    <td ng-repeat="square in row"> 
     <div ng-class="square.class()"><img ng-src="square.img()"/></div> 
    </td> 
    </tr> 
</table> 

Каждый квадрат доставляет как класс для его стиля и прозрачный файл PNG, который может быть отображен там, чтобы показать различные шахматные фигуры на квадраты. Это идея. Но это может полностью не справиться с вашей игрой, потому что ей не хватает необходимого взаимодействия или анимации или чего-то еще, что крайне важно для пользовательского опыта, который вы пытаетесь создать.

В конечном счете вы должны работать в обратном направлении от пользовательского интерфейса, а не от того, что, по вашему мнению, должно выглядеть API. Я процитирую Том Дэйл, говорящий о Ember Data: «Мы совершили кардинальный грех изобретать API, а не извлекать его ...»

+0

Спасибо, Джон! То, что вы сказали в первых двух параграфах, было на самом деле тем, как этот проект начался. На данный момент у меня только очень простые игры, поэтому я пойду с вашей идеей - каждая игра предоставляет свой собственный класс для самых сокровенных div. Когда я начну с чего-то более сложного, я могу включить решение Sharondio, и каждая игра предоставляет свой собственный класс класса css или директив. Отличная цитата btw! – Endre

Смежные вопросы