CODEWITHSUNDEEP
angularjs
pers3us
pers3us

Reputation: 243

ng-repeat not updating the view

I have this function inside my controller and I am using ng-repeat to update the view. The thing is the view is not getting updated even if I use $scope.$apply() in the controller below. I am probably missing something here.

I have verified by debugging that 

   $scope.files = promise.file;

is getting the values correctly, yet ng-repeat associated to $scope.files is not getting updated.

Controller:

  $scope.prevDirFiles = function(){
    var currDir = fileSvc.getCurrDir();
    var arr = currDir.split('/');
    var rebuildDir = config.rootDirectory;
    for(var i=1; i<arr.length-1;i++){
        rebuildDir += '/'+arr[i]
    }
    // Load File based on rebuilt directory path
    fileSvc.setPath(rebuildDir);

    $scope.$apply(fileSvc.getfiles().then(
        function(promise){
            $scope.files = promise.file;
        }
    ));
}

Service:

 this.getfiles = function(){
    var deffered = $q.defer();
    var url = config.url + 'api_all';
    console.log("Path is: ");
    console.log(this.path);
    $http({method:'POST', url:url,data: {path:this.path}})
        .success(function (data, status, headers, config) {
            deffered.resolve(data);
        })
        .error(function (data, status, headers, config) {
            deffered.reject({"status": false});
        });
    return deffered.promise;
}

Can someone please guide me as to where I am wrong.

Thanks.

HTML

<ul class="list" ng-repeat="file in files">
    <li class="list-main" ng-click="getFiles('{{file['file-path']}}','{{file['file-name']}}')" >
        <img src="images/cloud.png" class="img">
        <div class="list-info">
            <div class="list-header">{{file['file-name']}}</div>
            <!--<div class="list-info-bottom">Last Modified on 01-Aug-2013 15:38:38</div>-->
        </div>
    </li>
</ul>

Controller Function bound to ng-click

$scope.getFiles = function(fpath,fname){
    var path = fpath +'/'+fname;
    fileSvc.setCurrDir(path);
    console.log(path);
    fileSvc.setPath(path);

    fileSvc.getfiles().then(
        function(promise){
            $scope.files = promise.file;
        }
    )

}

Even after applying $apply on $scope.files, the 2nd function prevDirFiles is not updating the view. 

$scope.prevDirFiles = function(){
    fileSvc.getCurrentWorkingDirectory().then(
        function(response){
            var arr = response.split('/');
            var rebuildDir = config.rootDirectory;
            for(var i=1; i<arr.length-1;i++){
                rebuildDir += '/'+arr[i]
            }
            fileSvc.setPath(rebuildDir);
            fileSvc.getfiles().then(
                function(response){
                    $scope.$apply($scope.files = response.file);
                }
            );
        })

}

Upvotes: 0

Views: 767

Answers (1)

pers3us
pers3us

Reputation: 243

Well, I found out why this was not working. I had another ... in index.html outside app-body. It actually was the button which was triggering prevDirFiles() function as had ng-controller="FilesCtrl" . And also in the route, I had defined for the page had controller as before FilesCtrl. I am not sure exactly how and what went wrong inside in angularjs (if someone knows please do explain), it got fixed when i removed the controller from header.

Upvotes: 2

Related Questions