Артур Мудрик

Жесть. Посмотрел гифку на Гитхабе, там, где весь процесс наглядно показан, код даже не смотрел.

Ну вот смотрите, ясно же, что информация о маршрутах, вот все эти текстики, типа, «Из Стокгольма на пароме до Риги, каюта 6a…», это всё должно генерироваться из данных, а не ручками в textarea писать :)

Вам нужно было образно придумать, что за АПИ вы будете использовать и какие данные от него приходят — из этих данных создавать все записи и весь путь.

Из {откуда} на {транспорт} до {докуда}, {тип_места: каюта, сиденье, место и т.п. в зависимости от типа транспорта} {номер_места} и прочие данные… — и еще для всего этого нужна локализация (не только же на русском тексты будут), и еще всё это нужно просклонять, если уж вообще перфекционистски делать — согласитесь, «Из Стокгольм до Рига…» звучит ужасно.

А у вас просто всё это пишется в текстовом поле — тогда уж вообще нужно одно текстовое поле вместо всей вашей формы и кнопочек, и там оператор напишет кучу текста сам, с кучей ошибок, несистемно :)

Вот сейчас возьмите всё, что вы сделали, и представьте, что номер рейса изменился, или номер сиденья изменился (вас поменяли с кем-то, и у вас изменилось место и у другого человека) — как вы это обрабатывать будете? Заходить в каждый маршрут и ручками править текст в textarea?

А насчет данных и сортировки, элементарно — данные самые обычные, обычный жисончик, массив из объектов. Сортировка по левому и правому ключу, nested sets, чтобы можно было создавать маршруты любой глубины, например, не просто Рига → Стокгольм, а между ними маршруты по Риге и маршруты по Стокгольму... ну, как дерево, можно раскрыть один маршрут, а там подмаршруты.

Первое — чтобы преобразовать ангуларовский объект (в котором есть всякие одно- и двудолларовые параметры, все эти $xxx и $$xxx) в нормальный (т.н. raw json) нужно использовать стандартные ангуларовские методы из коробки:

angular.fromJson(response)
и
angular.toJson(response)

Просто поковыряйте эти функции и посмотрите, что они вернут.

По поводу промисов. Когда вы вызываете какой-либо $resource-метод, например, .query(), то вам сразу же, моментально, возвращается объект с двумя параметрами — $promise и $resolved: false. После того, как ресурс получил данные, в ваш объект с двумя параметрами добавляется ещё куча данных (ну, json-данные, что вам вернул сервер), а параметр $resolved становится true.

Так вот $promise нужен тогда, когда после загрузки данных вам нужно что-то сделать :) Ведь когда вы послали запрос, вы не знаете, когда придет ответ, а $promise знает и позволяет вам что-нибудь сделать именно после загрузки. Обращаться к промису нужно так:

vm.data = dataService.getData().$promise.then(success, error);

function success(resource) {
    // тут не данные в resource, а объект $resource с данными, тут можно почистить его через angular.fromJson и т.п.
}

Тут, после получения данных, ваш vm.data сразу же пополняется данными ответа (и вы там что-то выводите через ng-repeat — Ангулар там сам понимает, что выводить нужно только ваши данные, и не выводит еще два параметра $promise и $resolved, хотя они в объекте присутствуют, как вы уже в console.log вывели и убедились), а в функции success можно еще что-нибудь сделать.

Можно так же сразу и не присваивать vm.data ничего, а сначала сделать какие-то действия в success и только потом присвоить, вот так:

dataService.getData().$promise.then(success, error);

function success(resource) {
    // тут не данные в resource, а объект $resource с данными, тут можно почистить его через angular.fromJson и т.п.
    // сначала что-нибудь делаем с полученными данными, а потом присваиваем их в скоуп
    vm.data = transformMyData(resource);
}

Ангулар ничего не знает о клике, повешенном через метод .on() — поэтому после клика Ангулару нужно принудительно сообщить об рефреше скоупа:

a.on('click', function(e) {				
    var page = e.target.text;

    $scope.setPage(page);

    // обновляем скоуп
    $scope.$apply();
});

По поводу вообще всего в общем:

В контроллере должна быть только логика — забудьте про жиКвери, забудьте про селекторы, выкиньте из головы жиКвери-подход — контроллеры ничего не знают о DOM-элементах, в контроллерах только логика.

Прятать/показывать элементы нужно не по-жикверевски, через метод .css() (работая с DOM), а по-ангуларовски, через ng-show (работя с логикой).

Задавать классы нужно не по-жикверевски, через метод .addClass() (работая с DOM), а по-ангуларовски, через ng-class (работя с логикой) (причем, ты задаешь классы .show/.hide — тут не классы нужны, тут используй ng-show, ведь ты же показываешь/прячешь).

Вставлять элементы в DOM не нужно, это делается прямо в ХТМЛе, а не в контроллере:

<ul class="pagination">
    <li ng-repeat="page in pages">{{page}}</li>
</ul>

Вешать события на элементы нужно не по-жикверевски, а прямо в ХТМЛе:

<ul class="pagination">
    <li ng-repeat="page in pages" ng-click="openPage(page)">{{page}}</li>
</ul>

Да и вообще, там должна быть обычная ссылка, а не событие клика:

<ul class="pagination">
    <li ng-repeat="page in pages">
        <a ng-href="/page/{{page}}">{{page}}</a>
    </li>
</ul>

И самое главное — удалите жиКвери. Он не нужен вообще-привообще, выкиньте из мозга саму концепцию жиКвери, выкиньте способ размышления на жиКвери — Ангулар работает совершенно по-другому.

Жесть. При чем тут Ангулар? Вы думаете, что Ангулар еще и кашу умеет варить? Фреймворки реализуют архитектуру приложения, они не знают, что такое «прозрачные участки у изображения», когда день рождения у Анжелины Джоли и изберут ли Путина на третий срок — вы совершенно не понимаете даже о чем спрашиваете.

И суть вашей проблемы тоже не понимаете — вам не прозрачные участки изображения нужно обрабатывать, совершенно мимо, вообще не то. И даже Яваскрипт здесь не при чем, вообще-привообще!

Вам нужно через обычный CSS сделать border-radius нужной величины и задать background-image с картинкой и сделать background-size: cover; и background-position: center center;, а изображение не нужно делать круглым, изображение обычное, прямоугольное делайте, ибо скругление делается средствами CSS.

В первом комментарии всё верно и лаконично сказали — через $rootScope — я же просто разжую.

Модуль ngRoute это просто обычный конфиг — вы в этот конфиг можете пихать всё, что вам угодно. Задайте каждой страничке уникальную айдишку или название категории странички:

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/main', {
        id: 'main',
        title: 'Главная',
        category: 'rootPage',
        templateUrl: 'mainPage.html',
        controller: 'MainPage',
      }).
      when('/powerSky', {
        id: 'powersky',
        title: 'Всем повер-скай, посоны',
        category: 'contentPage',
        templateUrl: 'template/powerSky.html',
        controller: 'PowerSky'
      }).      
      otherwise({
        redirectTo: '/main'
      });
  }]);

Теперь, при каждой смене странички, в основном контроллере (это который общий для всех страниц сайта) пихайте в $rootScope конфиг текущей странички (текущего роута) в параметр page:

app.controller('MainController', function($rootScope) {
  $rootScope.$on('$routeChangeSuccess', function(e, current, previous) {
    var page = current.$$route;

    // присваиваем глобально
    $rootScope.page = page;
  });
});

Теперь в HTML-шаблоне вставляйте класс для BODY:

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <title>{{page.title}}</title>
    </head>
    <body ng-class="page.id" ng-controller="MainController">
        <main ng-view></main>
    </body>
</html>

Или, если у вас странички разбиты на некие общие категории, то не айдишку вставляем, а название категории (тогда меньше всяких классов нужно будет писать в CSS):

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <title>{{page.title}}</title>
    </head>
    <body ng-class="page.category" ng-controller="MainController">
        <main ng-view></main>
    </body>
</html>

Ну и в стилях будет:

body {
    &.rootPage {
        background-color: #fff;
    }

    &.contentPage {
        background-color: #ddd;
    }
}