3

Я смотрю свой путь в AngularJS.AngularJS Подождите, пока переменная области может быть оценена по специальной директиве

Я создал пользовательскую директиву:

app.directive('myScroll',function(){ 
return { 
    restrict: 'A', 
    transclude: true, 

    template: '<div ng-transclude></div>', 
    link: function(scope , element , attrs) { 

    element.addClass('scroll-pane'); 

    scope.$watch('tasks', function(newval, oldval){ 
      if (newval ) 
      { 

      console.log(newval); 
      console.log(newval.length); 
     } 

    }); 

     console.log("afer watch exper"); 
     console.log (tasks); 



    } 


    }; 

});

со следующей HTML:

<div my-scroll> 
     <ul> 
      <li data-ng-repeat="task in tasks" class="task-wrapper"> 
       <div class="task-element"> 
        <div class="name">{{task.name}}</div> 
        <div class="text">{{task.action}}</div> 
       </div> 
      </li> 
     </ul> 
    </div> 

задача объекта оценивается через сервис под названием контроллера (в случае необходимости я буду размещать свой код).

в директивном коде объект задач не определен, так как мне нужно, чтобы длина задач выполнялась больше команд css, мне нужно дождаться завершения ng-repeat или просто ждать переменную задач.

по какой-либо причине задачи всегда не определены как снаружи, так и внутри оператора $ watch. Я могу видеть в консоли, что «после часов опыта» печатается сначала, а затем «в часах», но все равно никаких значений. объект newval имеет [move2: function], но его свойство length сохраняет значение 0, но он сохраняет массив ресурсов с моими задачами.

что мне здесь не хватает и как я могу выполнить команду, когда оценивается переменная задач?

спасибо за помощников.

ответ

11

Чтобы отправить данные, вы должны использовать scope.tasks.

app = angular.module('myApp', []); 
app.directive('myScroll', function() { 
    return { 
     restrict: 'A', 
     transclude: true, 

     template: '<div ng-transclude></div>', 
     link: function (scope, element, attrs) { 

      element.addClass('scroll-pane'); 

      scope.$watch('tasks', function (newval, oldval) { 
       if (newval) { 
        console.log(newval); 
        console.log(newval.length); 
       } 
      }); 
      console.log("afer watch exper"); 
      console.log(scope.tasks); //this will log the actual data. 
     } 
    }; 
}); 

function Ctrl($scope) { 
    $scope.tasks = [{ 
     name: "task1", 
     action: "action1" 
    }] 
} 
+0

спасибо! глупая ошибка у меня ... У меня есть еще один маленький вопрос, я вижу, что выражение часов называется дважды, почему? из-за вызова службы asyc в db? – RonenIL

5

Попробуйте прохождение 3-й параметр - правда до $ смотреть:

scope.$watch('tasks', function(newval, oldval){ 
    if(newval){ 
     console.log(newval); 
     console.log(newval.length); 
    } 
},true); 
+0

Это работало для меня, и из документов я вижу сравнение «истинных» сил по сравнению с равенством объектов вместо ссылки. Вы знаете, зачем это нужно здесь? – thebenedict

+1

Когда вы передаете true в качестве третьего параметра, угловая создает глубокую копию модели, на которую смотрят. Кроме того, в документе говорится: «Чтобы сохранить значение объекта для последующего сравнения, используется функция угловой.copy, а также означает, что просмотр сложных параметров будет иметь неблагоприятные последствия для памяти и производительности». Таким образом, хранение часов на огромных объектах, вероятно, не очень хорошая идея. – AlwaysALearner

+0

Я застрял на этом несколько раз, поэтому я сделал плункер, чтобы продемонстрировать разницу: http://plnkr.co/edit/DHJPwMOg4LZTSk1uiV9z?p=preview – thebenedict

Смежные вопросы