Работа с angular, bootstrap модальные окна, как правильно работать с AJAX ?

Question

[nepster-web]

Сегодня покапал в сторону angular и bootstrap, чтобы отрефакторить мой костыль на jquery.

Кнопка для окошка

<div ng-app="app" ng-controller="Ctrl">
      <button ng-click="open('view.html')">Open dialog</button>
 </div>

Вызов моего окошка:

angular.module('app', ['ui.bootstrap.dialog'])
        .controller('Ctrl', function($scope, $dialog, $window) {
            $scope.open = function(templateUrl) {
                var options = {
                    backdrop: true,
                    keyboard: true,                    
                    controller: 'DialogCtrl',
                    templateUrl: templateUrl
                };
                var dialog = $dialog.dialog(options);
                dialog.open().then(function(result) {
                    if (result === 1) {
                        $window.alert("OK pressed");
                        
                    }
                });
            };
        })
        .controller('DialogCtrl', function($scope, dialog) {
            $scope.close = function(result) {
                dialog.close(result);
            };
        });

Возникло 2 вопроса:
1) Как передать данные в templateUrl (тоесть в шаблон окна) ?. Ну например я хочу передать текст заголовка.

2) Как использовать аякс в окне, тоесть к примеру я открыл окно с формой, ввел данные и мне нужно эти данные послать на сервер. Могу ли я использовать внутри окна вот такую конструкцию:

// Assign handlers immediately after making the request,
            // and remember the jqXHR object for this request
            var jqxhr = $.ajax({
                type: 'POST',
                url:  '/backend/controller.php',
                data: {'action':'editCoord', 'coordId':coordId,  'x':x, 'y':y, 'fieldName':fieldName}
            }).success(function(responce) {

                var checkResponce = jQuery.parseJSON( responce );
                
                // Возникла ошибка
                if (typeof checkResponce.error !='undefined') {
                    $('.error').html(checkResponce.error).show(300);
                }else {
                    // Жадный рендер 
                    renderAll(false,responce);
                    // Закрыть все окна
                    $.arcticmodal('close');
                }
            })
            .fail(function() {
                console.log( "error" );
            })
            .done(function() {
                $('.load').hide();
            })

или это уже предусмотрено как-то по другому ?

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

Answer 1

[Сергей Протько]

вы заменили кастыль на jquery гуано на angular.js.

Никогда в контроллере не работайте с jquery или dom. Для этого существуют директивы.
Никогда в контроллере не работайте с $http, выносите все это в сервисы.

Конструкция, которую вы приводите, реализуется приблизительно так:

angular.module('app')
   .factory('myApiClient', function ($http, $q) {
       return {
            save: function (data) {
            
                 return $http({
                       method: 'POST',
                       url: 'some_url',
                       data: data
                 }).then(function (response) {
                     if (!response.data || response.data.error) {
                         return $q.reject();
                     }
                     
                     return response.data; // я не уверен надо ли вам это... сами решите
                 }, function () {
                     return $q.reject();
                 });
            } 
       }     
   })

   .controller('MyCtrl', function ($scope, myApiClient) {
       $scope.save = function () {
           myApiClient.save(...).then(function (data) {
                $scope.showResponse = true;
           }, function () {
                $scope.showResponse = false;
           })
       }
   });

А в представлении уже используете директивы, которые завязаны на scope (ngHide/ngShow). Идею вы должны уловить. Суть в максимальном уменьшении связанности. Иначе смысла использовать angular я не вижу. И у меня есть подозрение что для вашей задачи не нужен angular.