Question

我已成功填充来自其余调用的数据，之后我可以通过使用其id访问click事件来获取该数据的详细信息。我能够在控制台中打印数据，但无法在模板中绑定它。这是我的代码。

service.js：

 (function() {
            angular.module('myApp').service('registerService', registerService,restService);
        var baseUrl:"http://localhost:xxxxxxxxxxx"
            function registerService($q, $http) {
                //var category={};
                var deferred = $q.defer();
                //function to get all category
                     this.getAllCategory = function () {

                         //calling json data
                         return $http.get(baseUrl).then(function (response) {
                                 category = response.data;
                                 deferred.resolve(category);
                                 return deferred.promise;
                             },
                             function (error) {
                                 deferred.reject(error);
                                 return deferred.promise;
                             });
                     },
                         //function to get category by id
                    this.getSubCategory = function (id) {
                        console.log('inside subcategory');
                        return $http.get(baseUrl + '/' + id)
                            .success(function (response) {
                                deferred.resolve(response.data);
                                  return deferred.promise;
                            },
                            function (error) {
                                deferred.reject(error);
                                return deferred.promise;
                            });
                    };
            }
        })();

controller.js：

(function () {
        angular.module('shoppingPad').controller('registerCtrl', registerCtrl);

        function registerCtrl($scope, registerService, $stateParams, $state, Page) {

            // var categoryId = $stateParams.categoryId;

            $scope.category = null;
            $scope.cur_category = null;

            //getCategory function to get all category from rest call.

            $scope.getCategory = function () {
                //setting title for registration
                Page.setTitle('Registration');
                registerService.getAllCategory().then(function (response) {
                    $scope.category = response;
                    console.log($scope.category);
                   })
            };

            //passing id to subCategory function to get sub category by id

            $scope.subCategory = function (id) {
                //setting title for sub-category
                  Page.setTitle('Sub-Register');
                registerService.getSubCategory(id).then(function (data) {
                      console.log(data);
                      $scope.cur_category = data;
                      console.log($scope.cur_category);
                      $state.go('app.home.register3', {'categoryId': id})
                });

            };
             $scope.signin = function () {
                $state.go('app.login.step1')
            }

        }
    })();

登记-2.HTML：

 <md-content ng-controller="registerCtrl">
        <h3 class="Select-Sub-category">Select Sub-Category</h3>
        <div layout="row" layout="column" flex=100"  style="width:200px;">
            <div style="margin-left:16px" class="Rectangle-425-Copy-3"  flex-gt-sm="50">
                <span class="RETAIL">{{cur_category.name}}</span>
            </div>
        </div>
    </md-content>

在app.js中，我定义了一个这样的状态：

 $stateProvider.state('app.home.register2', {
                        url: "/register",
                        templateUrl: 'template/register/registration-1.html',
                        controller: 'registerCtrl',

                    })
                    .state('app.home.register3', {
                        url: "/register/{categoryId:[0-9]{1,5}}",
                        templateUrl: 'template/register/registration-2.html',
                        controller: 'registerCtrl' 

                    })

Answer 1

你必须在register.js中创建另一个调用subCategory（）的函数。用它来更新你的代码它会起作用。

var categoryId=$stateParams.categoryId;

$scope.categoryData=function(){
 $scope.subCategory(categoryId);
}

并在您的注册 - 2.html中调用此函数。

<md-content ng-init="categoryData()">
        <h3 class="Select-Sub-category">Select Sub-Category</h3>
        <div layout="row" layout="column" flex=100"  style="width:200px;">
            <div style="margin-left:16px" class="Rectangle-425-Copy-3"  flex-gt-sm="50">
                <span class="RETAIL">{{cur_category.name}}</span>
            </div>
        </div>
    </md-content>

Answer 2

您的代码只发送 ID 。您的代码需要;

发送数据

OR

发送ID并通过服务获取数据。

将数据一个状态发送到另一个状态有一个很好的解决方案：

Angular ui router passing data between states without URL

如何使用rest调用将数据从控制器绑定到角度视图

2 个答案: