ui-sref 被阻止访问控制器数据或视图

Question

我在获取状态参数的控制器时遇到了一些问题。我正在使用正确的状态 link 到下一个视图。

 <td><a ui-sref="orders({customerId: cust.id})">View Orders</a></td>

在我的配置文件中，我引用了名称和路由参数的状态。我暂时注释掉了解析对象。我的目标是进入控制器然后传递正确的数据。 请注意，我正在使用 controllerAs

我最初的想法是 ({customerId: ctrl.cust.id }) 但是这并没有改变 url 路线。 url 正在更改以匹配 url 名称，但没有连接到控制器并且没有给我视图。

    (function() {
        'use strict';

        angular
            .module('app.orders')
            .config(config);

        function config($stateProvider) {
            $stateProvider
                .state('orders',{
                    // params: {customerid: null},
                    url:'/customers:customerId', 
                    templateUrl: './components/orders/orders.html',
                    controller: 'OrdersController',
                    controllerAs: 'ctrl',
                    resolve: {
                    customerFactory: 'customerFactory',
                    customerInfo: function( customerFactory, $stateParams) {
                    return customerFactory.getCustomers($stateParams.id);
                }

            }

*************** 我的主要问题是解决。这阻止我进入下一个控制器。 *****************

                    resolve: {
                        customerId:[ '$stateParams','customerFactory', function( $stateParams, customerFactory) {
                             return customerFactory.getCustomers($stateParams.id);
                         }]
                     }
            })
        };
})();

目前我的控制器非常小。我只想连接到它。我检查了我的网络选项卡并查看 GET 文件。

  (function() {
    // 'use strict';
    angular
        .module('app.orders')
        .controller('OrdersController', OrdersController);

    function OrdersController($stateParams) {
        console.log('in');
            var vm = this;
            vm.title = "Customer Orders";
            vm.customer = null;
    }
}());

我在 javascript 主文件中引用了我的模块。

   (function () {
    'use strict';

    angular.module('app', ['app.services',
        'app.customers',
        'app.orders','ui.router']);
})();

当我注释掉 resolve 时，我可以访问控制器。所以我知道问题在于解决。这是我的服务。我正在使用 $http 请求 Json 文件并使用 .then

更新这是我重构的服务调用，我每次都在控制台中返回正确的客户。

  (function() {
    angular
        .module('app.services',[])
        .constant('_', window._)
        .factory('customersFactory', customersFactory);

    function customersFactory($http, $log) {

        return {
            getCustomers: getCustomers,
            getCustomer: getCustomer
        };
        function getCustomers(){
            return $http.get('./Services/customers.json',{catch: true})
                .then(getCustomerListComplete)
                .catch(getCustomerListFailed);

                function getCustomerListComplete(response) {
                    console.log('response.data',response.data);
                    return response.data;
                }

                function getCustomerListFailed(error) {
                    console.log('error', error);
                }
        }

        function getCustomer(id) {
            var url = './Services/customers.json';
            return $http.get(url, {
                catch: true
            })
            .then(function(response) {
                console.log('promise id',id);
                var data = response.data;
                for(var i =0, len=data.length;i<len;i++) {
                    console.log('data[i].id',data[i].id);
                    if(data[i].id === parseInt(id)) {
                        console.log('data[i]', data[i]);
                        return data[i];
                    }
                }
            })
        }
    }
}());

Answer 1

有个working example with your code

很难猜出哪里出了问题。 根据我在这里给你的建议 ...你的代码似乎是 完全有效.

我把你的东西放到这个 app.orders.js 文件中 （唯一的变化是 templateUrl 路径，只是为了 plunker 目的）:

angular
  .module('app.orders', ['ui.router'])


'use strict';

angular 
    .module('app.orders')
    .config(['$stateProvider', config]); 

//config.$inject = ['$stateProvider'];
function config($stateProvider) {
    $stateProvider
        .state('orders',{
            // params: {customerid: null},
            url:'/customers:customerId', 
            //templateUrl: './components/orders/orders.html',
            templateUrl: 'components/orders/orders.html',
            controller: 'OrdersController',
            controllerAs: 'ctrl'
            // resolve: {
            //     customerId:[ '$stateParams','customerFactory', function( $stateParams, customerFactory) {
            //         return customerFactory.getCustomers($stateParams.id);
            //     }]
            // }
    })
};


// 'use strict';
angular
    .module('app.orders')
    .controller('OrdersController', OrdersController);

OrdersController.$inject = ['$stateParams'];
function OrdersController($stateParams) {
    console.log('in');
        var vm = this;
        vm.title = "Customer Orders " + $stateParams.customerId;
        vm.customer = null;
}

这是工作模板components/orders/orders.html:

<div >
  <h3>current state name: <var>{{$state.current.name}}</var></h3>

  <h5>title</h5>
  <pre>{{ctrl.title}}</pre>
  ...

当我这样称呼它时：

<li ng-repeat="cust in [{id:1}, {id:2}]"
    ><a ui-sref="orders({customerId: cust.id})">View Orders - cust ID == {{cust.id}}</a>
</li>

在action here

中查看

Answer 2

所以，虽然是关于让状态在没有解决的情况下工作，现在我们将观察一些调整（和一个修复）来使解决工作。

有a working plunker，扩展了上一个。

修复

唯一的修复，最重要的变化来自这个定义：

angular
    .module('app.services',[])
    .factory('customersFactory', customersFactory);

见厂名中的复数形式'customersFactory'。在这里：

...my main problem is the resolve. This is blocking me from getting into the next controller....

resolve: {
  customerId:[ '$stateParams','customerFactory', function( $stateParams, customerFactory) {
    return customerFactory.getCustomers($stateParams.id);
  }]
}

我们求'customerFactory'（单数，中间没有s）

一些改进：

所以，这将是我们调整后的状态 def:

$stateProvider
    .state('orders',{
        // INTEGER is here used to later easily use LO_DASH
        url:'/customers{customerId:int}', // int is the type
        templateUrl: './components/orders/orders.html',
        controller: 'OrdersController',
        controllerAs: 'ctrl',
        resolve: {
          // wrong name with 's'
          //customerId:[ '$stateParams','customerFactory', 
          // we use customer, because we also changed the factory 
          // implementation - to return customer related to 
          // $statePrams.customerId
          customer:[ '$stateParams','customersFactory', 
            function( $stateParams, customersFactory) {
              return customersFactory
                //.getCustomers($stateParams.id)
                .getCustomer($stateParams.customerId)
                ;
            }]
          }
})

现在，这是我们调整后的工厂，它的新方法getCustomer

angular
  .module('app.services', [])
  .factory('customersFactory', customersFactory);

customersFactory.$inject = ['$http', '$log', '$q', '$stateParams'];

function customersFactory($http, $log, $q, $stateParams) {

  return {
    getCustomers: getCustomers,
    getCustomer: getCustomer
  };

  function getCustomers() {
    // see plunker for this, or above in question
  }

  // new function
  function getCustomer(id) {
    var url = "customer.data.json";
    return $http
      .get(url, {
        catch: true
      })
      .then(function(response){
        var data = response.data;
        var customer = _.find(data, {"id" : id});
        return customer;
      })
      ;
  }
}

这是我们的 data.json:

[
  {
    "id" : 1, "name": "Abc", "Code" : "N1"
  },
  {
    "id" : 2, "name": "Def", "Code" : "N22"
  },
  {
    "id" : 3, "name": "Yyz", "Code" : "N333"
  }
]

这里我们有 控制器:

OrdersController.$inject = ['$stateParams', 'customer'];
function OrdersController($stateParams, customer) {
    console.log('in');
        var vm = this;
        vm.title = "Customer Orders " + $stateParams.customerId;
        vm.customer = customer;
}

a 查看向客户展示

<h3>customer</h3>
<pre>{{ctrl.customer | json}}</pre>

检查一下here in action

ui-sref 被阻止访问控制器数据或视图

ui-sref blocked from accessing controller data or view

javascript

angularjs

angular-ui-router

ui-sref

修复

一些改进：