javascript - 如何使用休息调用将 Controller 中的数据绑定(bind)到 Angular View

Question

我已经成功地从其余调用中填充了数据，之后我可以通过使用其 id 点击点击事件来获取该数据的详细信息。我可以在控制台中打印数据，但无法将其绑定(bind)到模板中。这是我的代码。

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')
            }

        }
    })();

registration-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);
}

并在您的registration-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>