RouteProvider解析AngularJS

Question

这是我的代码： JS：

angular.module('main', [])
.config(['$locationProvider', '$routeProvider',
    function($locationProvider, $routeProvider) {
          $routeProvider.when('/tables/bricks', {
              controller: "myController",
              resolve: {
                  "check" : function($location){
                      if(!$scope.bricks) {
                           $route.reload();
                      }
                  }
              },
            templateUrl: 'tables/bricks.html'
        });

         $routeProvider.otherwise({
             redirectTo: '/tables/datatables'
        });

    }
])


.controller('myController', function($scope, $location, $http) {
    var vm = this;

     $scope.Bricks = function(){
        $location.path('/tables/bricks');
    };

    vm.getbricks = function(n){
        var url = n;
        $http({
            method: 'GET' ,
            url: url,
        })
            .then(function successCallback(data) {
                $scope.bricks = data.data;
                console.log($scope.bricks);
            }, function errorCallback(response) {
                console.log(response);
                console.log('error');
            });

    };
});

HTML：

 <button ng-click="vm.getbricks(n.bricks_url);Bricks();"></button>

点击html中的按钮后，我的页面进入/tables/bricks，但没有任何事情发生，因为resolve可能是错误的。我想要的是 - 只有当/tables/bricks存在时我才会转到$scope.bricks，所以只有当vm.bricks()被调用时才会这样。 提前感谢您的回答！

Answer 1

我认为你的问题是vm.getbricks将总是返回一些东西（成功或错误处理程序），所以永远不会是假的，你总是会调用Bricks()构造函数。尝试在成功回调时返回true，在错误回调中尝试返回false。

Answer 2

$scope适用于控制器，它无法在配置中访问。相反，您应该从服务中返回一些内容，该内容将在 resolve 期间调用。例如。 if(YourService.getbricks())

解决方案：将您的逻辑从控制器移动到服务中。并确保return可以在配置中检查的值。{/ p>

app.service('BrickService', function() {
  this.getbricks = function(url) {
    return $http.get(url)        // return the Promise
      .then(function(response) {
        return response.data;    // return the data
      }, function(error) {
        console.log(error);
      });
  };
});

使用此功能，您可以将服务注入配置并运行其功能。

angular.module('main', [])
  .config(['$locationProvider', '$routeProvider',
    function($locationProvider, $routeProvider) {
      $routeProvider.when('/tables/bricks', {
        controller: "myController",
        resolve: {
          "check": function(BrickService) {    // inject
            if ( BrickService.getbricks() ) {  // run its function
              $route.reload();
            }
          }
        },
        templateUrl: 'tables/bricks.html'
      });

      $routeProvider.otherwise({
        redirectTo: '/tables/datatables'
      });
    }
  ])

您还可以在解析后使用控制器中的加载值。为此，您需要简单地返回它。所以改变逻辑：

resolve: {
  "check": function(BrickService) {    // inject
    var bricks = BrickService.getbricks(); // run its function
    if ( bricks ) {  
       $route.reload();
    }
    return bricks; // return the result (note: it's not a Promise anymore)
  }
}

然后你可以注入这个决心进入你的控制器：

.controller('myController', function($scope, $location, $http, check) {
  var vm = this;
  vm.bricks = check;
  ...

（注意check已添加）