angular js $ scope.apply 함수가 템플릿을 업데이트하지 않습니다.

서비스 요청에서 돌아와서 내보기를 업데이트 할 수없는 것 같습니다. 은 '깨지지 않았 음' 콘솔에 절대 빠져 나가지 않습니까?

서비스는 [{테스트 '서비스 workies'}] 반환

app.controller('foo-controller', ['fooService','$scope', function (fooService,$scope) { 
    var ctrl = this; 
    ctrl.Results = [{ test: 'no workies' }]; 
    ctrl.Search = function() { 
     fooService.GetFoos().then(function (result) { 
      console.log('test'); 
      console.log(ctrl.Results); 
      ctrl.Results = result; 
      console.log(ctrl.Results); 
      $scope.$apply(function() { 
       console.log('not broken');//never fires!! 
       ctrl.Results = [{test : 'workies' }] 
      }); 
     }); 
    }; 
    return ctrl; 
}]); 



    app.directive('fooLogo', function() { 
     return { 
      restrict: 'E', 
      templateUrl: './App/Templates/foo.html', 
      controller: 'foo-controller', 
      controllerAs: 'f' 

     }; 
    });

편집 foo는 서비스

 .service('fooService', ['$http', function ($http) { 

    return $http.get("https://www.googleapis.com/books/v1/volumes?q=harry+potter").then(

function(result){ return [{ test: 'service workies'}]}, 

function(error) { return [{test: 'service call no workies'}]);

출처

2015-01-07 gh9

당신이 fooService''에 대한 코드 등을 게시 할 수 있습니다 : 여기

<div> <ul> <li data-ng-repeat="book in books"> {{book.volumeInfo.title}} </li> </ul> </div>

가 동작하는 예제와 plunker입니다 제발? – pje

@pje가 서비스를 추가했습니다. – gh9

''test''가 기록 되나요? –

내가 코드에서 몇 가지 문제를 볼 나는 GetFoos() 선언 fooService 아무 곳이나 보이지 않는 다음과 같이 해보십시오.

app.controller('MainCtrl', ['$scope', 'BookQueryService', 
    function($scope, BookQueryService) { 

    $scope.search = function() { 
     BookQueryService.getBooks().then(function(data) { 
     $scope.books = data.data.items; 
     }); 
    }; 

    // call immediately for the sake of this example 
    $scope.search(); 
    } 
]); 

app.service('BookQueryService', ['$http', 
    function($http) { 
    var service = {}; 

    service.getBooks = function() { 
     return $http.get("https://www.googleapis.com/books/v1/volumes?q=harry+potter"); 
    }; 

    return service; 
    } 
]); 

app.directive('myBookList', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'BookList.html', 
    controller: 'MainCtrl' 
    } 
});

다음 HTML을

<body> 
    <my-book-list></my-book-list> 
    </body>

그리고 다음 지시문 템플릿 : http://plnkr.co/edit/KJPUWj0ghDi1tyojHNzI?p=preview

출처

2015-01-07 22:38:15 pje

나는 나쁜 코드 예제를 제공했는데, getFoos가 선언하지 않은 문제가있었습니다. 내 템플릿에 문제가 있습니다. 나는 ui-sref를 수행하고 앵커 태그를 클릭하십시오. 클릭이 발생하지 않았습니다. 앵커 태그에서 ng-click을 제거하고 예제처럼 컨트롤러에 자동으로 실행되도록 배치하여 내 문제를 해결했습니다. – gh9

fooService.GetFoos().then(function(result){...}) 제품 내부가 되는가 실행? 게시 한 코드가 모두 fooService 인 경우 .GetFoos 메소드 &이 없으므로 다음 .then 안에 아무 것도 실행되지 않습니다. fooService.GetFoos에 연결됩니다 원래 .then 후 .error를 추가

봅니다 :

fooService.GetFoos().then(function (result) { 
    // your code 
}).error(function (data, status){ 
    console.log("Error!\t", status); 
};

이 정확히 무슨 일이 일어나고 있는지 알아내는 데 도움이됩니다. 어떤 종류의 약속을 사용할 때마다 .catch 또는 .error인지 확인하십시오. 디버깅 할 때 많은 문제를 줄일 수 있습니다. 자세한 내용은 각도 $http documentation을 확인하십시오.

또한 원래 $scope.$apply()에 대한 호출이 필요없는 것 같습니다. 각도 외의 함수를 실행하거나 다이제스트주기를 수동으로 트리거하려는 경우에만 사용합니다 ($scope.$digest()을 명시 적으로 호출하는 것이 $scope.$apply보다 훨씬 적절할 경우)

체크 아웃 . 그 하나의 문제 그래서 $scope.$apply를 사용하는 경우에 대한 blog post 및 추가 정보를위한 $scope.$apply documentation page이

출처

2015-01-07 22:35:13

angular js $ scope.apply 함수가 템플릿을 업데이트하지 않습니다.

답변

관련 문제