뷰와 컨트롤러간에 바인딩이 작동하지 않습니다.

Question

방금 ​​Mean.js에서 개발하기 시작했고 각진 부분에 약간의 문제가있었습니다.

Ive는 recipe 모델로 기본 crud를 수행 할 수있는 노드에 api를 만들었습니다.

이제 기존 레시피 목록을 표시하려고합니다.

컨트롤러 :

'use strict'; 

angular.module('recipe').controller('RecipeController', ['$scope', 'RecipeService', 
    function ($scope, RecipeService) { 
    // Recipe controller logic 
    var vm = this; 

    vm.recipes = RecipeService.query(); 
    } 
]); 

보기 :

<section data-ng-controller="RecipeController"> 
    <div data-ng-repeat="recipe in vm.recipes"> 
    {{recipe.title}} 
    </div> 
</section> 

서비스 :

'use strict'; 

angular.module('recipe').factory('RecipeService', [ '$resource', 
    function ($resource) { 
    // Recipe service logic 
    var Recipe = $resource('api/recipes/:recipeId', { 
     recipeId: '@_id' 
    }, { 
     update: { 
     method: 'PUT' 
     } 
    }); 

    angular.extend(Recipe.prototype, { 
     createOrUpdate: function() { 
     var recipe = this; 
     return createOrUpdate(recipe); 
     } 
    }); 

    function createOrUpdate(recipe) { 
     if(recipe._id) { 
     return recipe.$update(onSuccess, onError); 
     } else { 
     return recipe.$save(onSuccess, onError); 
     } 

     function onSuccess(recipe) { 

     } 

     function onError(errorResponse) { 
     var error = errorResponse.data; 
     handleError(error); 
     } 
    } 

    function handleError(error) { 
     console.log(error); 
    } 

    // Public API 
    return Recipe; 
    } 
]); 

그래서, 컨트롤러에서 vm.recipe를 기록 콘솔 다음 비동기 후를 살펴 때 호출은 물건을 처리 할 것이고, 나는 DB에 2 개의 결과를 가지고 있기 때문에 vm.recipes에서 2 개의 결과를 볼 것입니다. 이러한 종류의 서비스가 제대로 작동하고 데이터를로드하는 것을 증명합니다. 또한 데이터를 거기에서 검색 할 것이기 때문에 그것은 컨트롤러에서 좋아 보인다. 그러나 이러한 데이터는보기에로드되지 않으며 이유는 알 수 없습니다. 보기에서 구성이 올바르게 선택됩니다.

누구 아이디어가 있습니까?

Answer 1

좋아,이 양식에서 작동하지 않는 이유를 찾지 못했지만 단순히 레서피를 $ scope 속성에 넣음으로써 작동시킬 수있었습니다.

'use strict'; 

angular.module('recipe').controller('RecipeController', ['$scope', 'RecipeService', 
    function ($scope, RecipeService) { 
    // Recipe controller logic 
    $scope.recipes = RecipeService.query(); 
    } 
]); 

Answer 2

및 HTML 에서에서 컨트롤러

에

$scope.recipes = RecipeService.query(); 

를 사용하는

var vm = this; 

vm.recipes = RecipeService.query(); 

시도의 장소에서

을 시도하십시오 사용