Question

我的应用程序中有家庭状态

$stateProvider
.state('home', {
    url: '/home',
    cache: false,
    controller: 'HomeCtrl as home',
    templateUrl: 'home/home.html'
})

我的家庭控制器

angular
   .module('home')
   .controller('HomeCtrl', HomeCtrl);

HomeCtrl.$inject = ['$scope', '$state', '$ionicPopup', '$ionicSideMenuDelegate', '$ionicScrollDelegate', '$ionicLoading',];

function HomeCtrl($scope, $state, $ionicPopup, $ionicSideMenuDelegate, $ionicScrollDelegate, $ionicLoading){
     var vm = this;
     vm.sortCriteria = 'Price';
     vm.showSortPopup = showSortPopup;
     return vm;

     function showSortPopup(){
        var myPopup = $ionicPopup.show({
            title: 'Sort',
            templateUrl : 'home/sort.html',
            scope : vm,
            buttons: [
                { text: 'Cancel'},
                {
                    text: 'Ok',
                    type: 'button-positive',
                    onTap: function(e) {
                        console.log(vm.sortCriteria);
                    }
                },
            ]

        });
    }
}

sort.html

<ion-list>
    <ion-radio ng-model="home.sortCriteria" ng-value="'Price'">Price</ion-radio>
    <ion-radio ng-model="home.sortCriteria" ng-value="'Distance'">Distance</ion-radio>
</ion-list>

由于我的sortCriteria不属于$scope，如何将其绑定到弹出窗口中的单选按钮？

Answer 1

为什么使用vm而不是$ scope是否有任何特殊原因？我宁愿尝试使用$ scope，如下所示：

.controller('HomeCtrl', function ($scope, $ionicPopup) {

//            var vm = this;
            $scope.sortCriteria = 'Price';
            $scope.showSortPopup = showSortPopup;
//            return vm;

            function showSortPopup() {
                var myPopup = $ionicPopup.show({
                    title: 'Sort',
                    templateUrl: 'home/sort.html',
                    scope: $scope,
                    buttons: [
                        {text: 'Cancel'},
                        {
                            text: 'Ok',
                            type: 'button-positive',
                            onTap: function (e) {
                                console.log($scope.sortCriteria);
                            }
                        },
                    ]

                });

            }
        })

并按如下方式更新sort.html：

<ion-list>
    <ion-radio ng-model="sortCriteria" ng-value="'Price'">Price</ion-radio>
    <ion-radio ng-model="sortCriteria" ng-value="'Distance'">Distance</ion-radio>
</ion-list>

离子 - 在弹出窗口中显示单选按钮

1 个答案: