Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: Angular 2, AngularJS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
di-power
0 / 0 / 1
Регистрация: 26.01.2014
Сообщений: 29
1

Не могу наладить свять view и модели

21.06.2015, 19:23. Просмотров 944. Ответов 5
Метки нет (Все метки)

Есть сайт, который ищет фильмы из базы по названию, а потом показывает описание. Приложение состоит из двух контроллеров, каждый на своём шаблоне. Один и тот же функционал реализован в обоих контроллерах, но в первом он работает, а во втором нет:

Код первого контроллера:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
filmApp.controller('searchFilmCtrl', function($scope){
    $scope.datas = data.results;
 
    $scope.totalResul = data.total_results;
 
    $scope.itemId = data.id;
 
    $scope.searchFilms = function(){
        function successCB(APIres) {
            APIres = JSON.parse(APIres);
            $scope.setFilms(APIres)
        };
        function errorCB(resul) {
            console.log("Error callback: " + APIres);
        };
        theMovieDb.search.getMovie({"query": $scope.searchName }, successCB, errorCB)
 
    };
    $scope.datas = data.results;
    $scope.setFilms = function(APIres){
 
        $scope.datas = APIres.results;
        $scope.totalResul = APIres.total_results;
        console.log($scope.totalResul);
 
    }
});
И его шаблон
Код
<div class="b-wrapper" ng-controller="searchFilmCtrl">
    <div class="b-search-row">
        <form ng-submit="searchFilms()">
            <div class="col-md-12 relative">
                <input type="text" class="form-control" ng-model="searchName" placeholder="Ведите название фильма...">
                <input class="b-search-form-submit btn btn-primary" type="submit" value="поиск">
            </div>


        </form>

        <div class="row">
            <span class="col-md-12 h6 b-search_total_resul">Найдено фильмов: {{totalResul}}</span>
        </div>
    </div>
    <div class="b-result-row">
        <div class="b-result-item" ng-repeat="data in datas">
            <a href="#/item/{{data.id}}" class="b-item-film-search col-md-12">
                <span class="col-md-4">
                    <img style="width: 100%;" src="http://image.tmdb.org/t/p/w500/{{data.poster_path}}" alt=""/>
                </span>
                <span class="col-md-8">
                    <span class="h1">{{data.title}}</span>
                    <span class="h4">{{data.release_date}}</span>
                    <span class="descript">{{data.overview}}</span>
                </span>
            </a>
        </div>
    </div>
</div>
Суть проста, пользователь вводит название фильма, я спрашиваю по АПИ результаты поиска, обновляют глобальную переменную data результатом поиска, после чего вывожу результаты.

Самое главное, что работает вот эта конструкция:

$scope.totalResul = data.total_results;

Дальше второй шаблон:


Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
filmApp.controller('itemFilmCtrl', function($scope){
 
    $scope.filmName = itemFilmData.original_title;
 
 
    $scope.getInfoAboutFilm = function(){
        function successCB(APIres){
            APIres = JSON.parse(APIres);
            $scope.setInfo(APIres)
 
        }
 
        function errorCB(APIres){
            console.log("Error callback: " + APIres);
        }
 
        theMovieDb.movies.getById({"id": ''+splitHref[1]+'' }, successCB, errorCB)
    }();
 
 
    $scope.setInfo = function(APIres){
        $scope.filmName = APIres.original_title;
        console.log($scope.filmName);
    };

HTML

Код
<div class="b-wrapper" ng-controller="itemFilmCtrl">
    <div class="b-control b-control--no-bord">
        <a href="#/" class="btn btn-primary">К поиску</a>
        <a href="#/edit" class="btn btn-primary fl-r">Редактировать</a>
    </div>
    <div class="b-item-film col-md-12">
        <div class="b-poster col-md-4">
            <img src="" alt=""/>
        </div>
        <div class="b-descript col-md-8">
            <h1 class="h1">{{filmName}}</h1>
            <p class="h4">Дата релиза</p>
            <p class="descript">Описание фильма</p>
        </div>
    </div>
</div>

<script>

    var href = window.location.href;
    var splitHref = href.split('#/item/');
    //На самом деле создавать глобальную переменную, чтобы передать данные из одного контроллера в другой, не самая хорошая идея.
    //Но как сделать по-другому я пока не разобрался
</script>

ТУт тоже все просто, пользователь заходит на страницу, из урла мы получаем id фильма, по нему запрашиваем информацию, записываем её в переменную itemFilmData и вот тут получается странная особенность. Конструкция:

$scope.filmName = itemFilmData.original_title;

Не работает. Т.е. после получении ответа, и обновлении информации в переменной информация на сайте не обновляется. А должна.

Отсюда вопрос, в чем может быть причина, и почему в первом случае все работает, а во втором нет
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.06.2015, 19:23
Ответы с готовыми решениями:

Не могу наладить работу с XPOSED
Привет. Работаю в Android Studio 2.3.3. Решила поучиться, по тестировать....

Не могу наладить чат [Indy 10, Delphi XE3]
Решил освоить Инди и вот первый мой проект. Суть чата в том, что у нас есть...

Никак не могу наладить работу плагина в Хроме
Хроме не проигырвает не какое видео. Лазил по сети и пробовал все варианты. ...

При создании сайта не могу наладить меню
Создавал сайт с помощью Adobe Dreamweaver CC. В этом деле я новенький, поэтому...

Не могу наладить связь Atmega64 с внешним АЦП AD7858
Есть МК Atmega64 к нему подсоединены 2 внешних АЦП AD7858. Настраиваю SPI на...

5
LeniumSoft
1438 / 828 / 150
Регистрация: 06.06.2012
Сообщений: 2,370
Завершенные тесты: 1
22.06.2015, 10:23 2
Лучший ответ Сообщение было отмечено di-power как решение

Решение

А если в метод добавить такую строчку! Работает?

Javascript
1
2
3
4
5
$scope.setInfo = function(APIres){
        $scope.filmName = APIres.original_title;
        console.log($scope.filmName);
        $scope.$$phase || $scope.$apply();
    };
1
di-power
0 / 0 / 1
Регистрация: 26.01.2014
Сообщений: 29
22.06.2015, 10:44  [ТС] 3
LeniumSoft, Бинго, спасибо. Заработало.

Спасибо огромное
0
JokerNN
134 / 130 / 57
Регистрация: 29.12.2011
Сообщений: 359
23.06.2015, 10:51 4
Я просто оставлю это здесь
https://github.com/angular/angular.js/wiki/Anti-Patterns
Посмотрите на 2й пункт
0
LeniumSoft
1438 / 828 / 150
Регистрация: 06.06.2012
Сообщений: 2,370
Завершенные тесты: 1
23.06.2015, 12:05 5
Цитата Сообщение от JokerNN Посмотреть сообщение
Я просто оставлю это здесь
Безусловно это плохая практика, но покажите мне иной(столь же простой) способ обновить представление и не получить:
http://davidburgosonline.com/web-dev...eady-progress/
http://stackoverflow.com/questions/1...progress-error
https://gist.github.com/siongui/4969449

Обновил свойство у $scope, а представление не обновилось.
Вызываем $scope.$apply() и бац, ошибочка!
Как обойти?
0
JokerNN
134 / 130 / 57
Регистрация: 29.12.2011
Сообщений: 359
23.06.2015, 12:22 6
В этом конкретном случае можно в объект забиндить данные
Javascript
1
2
3
4
5
6
7
8
9
$scope.film = {
        name: itemFilmData.original_title
    }
 
 // other code
    $scope.setInfo = function(APIres){
        $scope.film.name = APIres.original_title;
        console.log($scope.filmName);
    };
Примерно так
0
23.06.2015, 12:22
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.06.2015, 12:22

Использование модели в Partial View
Доброго времени суток. Начал разбираться с MVC и пытаюсь сделать Список задач....

Не отображается коллекция IEnumerable модели в стандартном View
Добрый день! У меня есть модель цветок, которая отображается во View, как...

Как в строго-типизированном View сделать DropDownListFor из другой модели?
Есть форма ввода данных в таблицу. Как сделать чтобы в строго-типизированном...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru