ビューとコントローラの間でバインディングが機能しない

Question

Mean.jsで開発を開始したばかりで、角の部分には少し問題があります。

レシピモデルで基本的なcrudを行うことができるノードにIveを作成しました。

今、既存のレシピのリストを表示しようとしています。

コントローラー：

'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をログコンソール、その後、非同期の後に見てみるとき、コールはものを処理しますが、私はvm.recipesで2つの結果を表示します。これはDBに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(); 

の場所でこの

を試してみてください の使用