javascript - AngularJs 在 ajax 请求后不加载我的菜单

Question

这是我的菜单服务:

    module.factory('menus', function($http) {
    return {
        getMenus: function(){
            return $http.get('api/menus')
                .then(function(result) {
                    return result.data;
                });
        }
    }
});

这是我的菜单 Controller :

    module.controller('MenuController', ['$scope', 'menus',
    function($scope, menus) {
        $scope.menus = false;

        function getDataForMenus(){
            menus.getMenus().then(function(data) {
                $scope.menus = data;
            });
        }

        getDataForMenus();


        $scope.$watch('menus', function(newVal, oldVal){
            if($scope.menus){
                console.log($scope.menus);
            }
        }, true);

    }]
);

这是我在 laravel 中的 Blade View :

 <div class="collapse navbar-collapse" ng-controller="MenuController">
        <ul class="nav nav-sidebar" role="navigation">
            <li ng-repeat="item in menus" class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="<% item.link %>"><% item.label %>
                    <b ng-if="item.type == 'parent'" class="caret"></b>
                </a>
                <ul role="menu" class="dropdown-menu" ng-if="item.type == 'parent'">
                    <li ng-repeat="children in item.children">
                        <a href="<% children.link %>">
                            <% children.label %>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

菜单没有接收数据，虽然菜单数据已加载，但似乎没有保留到 $scope.menus 中。我选择这种方式是因为我的菜单是由 laravel 在权限的基础上加载的。

任何帮助表示赞赏。谢谢!

Answer 1

服务

module.factory('menus', function($http) {
    return {
        getMenus: function(){
            return $http.get('api/menus')
                .then(function(result) {
                    console.log(result.data); //check whether you are getting data here.
                    return result.data;
                });
        }
    }
});

Controller

  module.controller('MenuController', ['$scope', 'menus',
function($scope, menus) {
    $scope.menus = false;

    function getDataForMenus(){
        menus.getMenus().then(function(data) {
            console.log(data); // if you are not getting data here change the service as below
            $scope.menus = data; // 
        });
    }

    getDataForMenus();


    $scope.$watch('menus', function(newVal, oldVal){
        if($scope.menus){
            console.log($scope.menus);
        }
    }, true);

}]
);

新服务

  module.factory('menus', function($http,$q) {
return {
    getMenus: function(){
    var deferred = $q.defer();
       $http.get('api/menus')
            .success(function(result) {
                deferred.resolve(result.data);
            });
      return deferred.promise;
    }
}
});

新 Controller

    module.controller('MenuController', ['$scope', 'menus',
function($scope, menus) {
    $scope.menus = false;

    function getDataForMenus(){
        menus.getMenus().then(function(data) {
           console.log(data); // check now whether you are getting the data.
           $scope.$watch(function(){
               $scope.menus = data;
            })

        });
    }

    getDataForMenus();



}]
);