Я знаю, что вы не должны вводить свою логику отображения внутри контроллера, и я борюсь с правильным способом AngularJS, чтобы приблизиться к этому.
Я представляю формы внутри модалов. Я использую Zurb Foundation для модального.
Разметка:
<div class="button" ng-click="modalAddWidget">Add Widget</div>
<div id="modalAddWidget" class="reveal-modal">
<h6>New Widget</h6>
<form>
<fieldset>
<legend>Widget Name</legend>
<input type="text" ng-model="ui.add_widget_value" />
</fieldset>
<div class="small button right" ng-click="addWidget()">Add Widget</div>
<div class="small button right secondary" ng-click="addWidgetCancel()">Cancel</div>
</form>
</div>
Контроллер:
...
$scope.modalAddWidget = function() {
$("#modalAddWidget").reveal();
}
$scope.addWidget = function() {
$scope.myobject.widgets.push({"name": $scope.ui.add_widget_value});
$scope.ui.add_widget_value = '';
$('#modalAddWidget').trigger('reveal:close');
}
$scope.addBudgetCancel = function() {
$scope.ui.add_widget_value = '';
$('#modalAddWidget').trigger('reveal:close');
}
...
Примечание: $scope.ui - это объект, который я использую для хранения значений пользовательского интерфейса, которые не должны привязываться к моему объекту, пока пользователь не наберет "Добавить виджет"
$scope.myobj - это где хранятся мои данные.
Функция Foundation $("#modalAddWidget").reveal();
представляет модальный оверлей.
Так как я не должен помещать свой код дисплея внутри контроллера, каков подходящий способ приблизиться к этому?