Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.08.2013, 00:03
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 553

Изменение модели в директиве
В директиве используется ng-model. Нужно чтобы при определенном событии на элементе (пусть при щелчке для примера) менялся параметр первого элемента модели. Есть два варианта, как это сделать:
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
    element.bind('someevent', function (e) {
          
        //1 вариант     
        if (typeof ngModel.$modelValue === 'object') {
            ngModel.$modelValue[0].active = true
            ngModel.$setViewValue(ngModel.$modelValue)
            scope.$apply()
        }
       
        //2 вариант              
        if (typeof scope[attrs.ngModel] === 'object') {
            scope[attrs.ngModel][0].active = true
            scope.$apply()
        }     
    })
})

Оба варианта работают, тем не менее, какой предпочтительней?

Но работают они не всегда. При первой загрузке они уже и так находятся в цикле $digest (соответственно, $apply не нужен) и тут проблема: срабатывают они через раз. Т.е. вид может обновиться, а может и нет, как повезет. Какие есть мысли по этому поводу?
Ответить с цитированием
  #2 (permalink)  
Старый 03.08.2013, 00:11
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Shitbox2
Есть два варианта, как это сделать
3. коллбэк в модель контроллер

Сообщение от Shitbox2
Какие есть мысли по этому поводу?
без тестового кода мыслей нет

<!DOCTYPE html>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
    <title>sandbox</title>

    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>

    <script>
        angular
                .module( 'directives', [])

                .directive( 'ngMy', function() {
                    return {
                        scope: {
                            callback: '&'
                        },
                        link: function( $scope, $element ) {
                            $element.bind( 'click', function() {
                                console.log( 1 );
                                $scope.callback();
                            });
                        }
                    };
                });


        var app = angular.module( 'app', [ 'directives' ]);


        app.controller( 'MainController', function( $scope, $http ) {
            $scope.fn = function() {
                console.log( 2 );
            };
        });

    </script>

</head>
<body ng-controller="MainController">

    <div ng-my callback="fn()" style="background-color: lavender;  height: 100px;">
        click on this element and see in console
    </div>

</body>
</html>
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 03.08.2013 в 01:08.
Ответить с цитированием
  #3 (permalink)  
Старый 03.08.2013, 15:17
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 553

Там большой джикверевский плагин, не могу пример показать... Эмулировать $digest никак не получилось, зато получилось с $apply.

Пример: http://plnkr.co/edit/MxCFH5WzUBAdbEuMRBH2?p=preview

Смысл в том, что при загрузке обновляется модель и $apply запущен, но в вид не обновляется.
Ответить с цитированием
  #4 (permalink)  
Старый 03.08.2013, 22:38
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 553

Продвинулся дальше в понимании причин http://stackoverflow.com/questions/1...e-in-angularjs
Сорри, что на английском, уже нет сил переводить.
Ответить с цитированием
  #5 (permalink)  
Старый 03.08.2013, 23:32
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Начну с того, что я не понимаю, зачем ты пытаешься обновить модель в директиве. Директивы для работы с DOM. С моделью работают контроллеры.

Зачем директива ng-model помещена внутрь элемента div?
<div my-directive ng-model="model"></div>

Нужна ли она вообще в данном случае?
http://stackoverflow.com/questions/1...el-and-ng-bind
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #6 (permalink)  
Старый 03.08.2013, 23:41
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 553

Это выхолощенный пример. Предыдущий был ближе к реальности. Директива отвечает за показ и управление списком элементов (слайдшоу) через jQuery-плагин. Один из элементов должен быть активным. Список элементов берется из ng-model, но если активный элемент меняется, то модель должна обновляться. Стандартная директива option обновляет же модель.
Ответить с цитированием
  #7 (permalink)  
Старый 04.08.2013, 19:08
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 553

Пример на фазы жизненного цикла http://plnkr.co/edit/cMH4WIezzw6SNyuLYzrm?p=preview
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
backbone - модели и json torsar Библиотеки/Тулкиты/Фреймворки 1 12.02.2013 14:26
Изменение данных при загрузке в модели LimYoHwan ExtJS 5 20.08.2012 15:40
mvc вызов модели из модели jetli13 Серверные языки и технологии 2 28.10.2010 12:09
Как обработать изменение масштаба окна в IE8 ? v_k Events/DOM/Window 1 09.08.2010 13:35
Модели событий partyzan Общие вопросы Javascript 2 30.04.2008 20:48