AngularJS Wait for scope variable to evaluate from custom directive

angularjs, angularjs-directive, angularjs-scope, angularjs-service

Solution

You should use `scope.tasks` to refer the data.

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"
    }]
}

Problem

I'm staring my way in AngularJS. I have created a custom directive: ``` 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); } }; ``` }); with the following 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> ``` the tasks object is evaluated through a service called by the controller ( if necessary i will post its code). in the directive code the tasks object is undefined, since i have to get the tasks length to execute more css commands i have to wait for ng-repeat to finish or just wait for tasks variable will be evaluated. for some reason tasks is always undefined both outside and inside the $watch statement. i can see in the console that "after the watch exper" is printed first and then the "in watch" but still no values. the newval object has [move2:function] but its length property keeps returning 0 but it keeps an array of resources with my tasks. what am i missing here and how can i execute command when the tasks variable is evaluated? thanks for the helpers.

Original source