Question

我有一个带有图片的网格，我想让点击的选择位置传递到全屏（使用$ state.go）。我实现了所有的东西，但索引位置始终为0.这是我的代码：

网格屏幕（secure.html）：

<ion-view title="My Images" ng-init="">
<ion-nav-buttons side="right">
    <button class="button button-icon icon ion-camera" ng-click="upload()"></button>
</ion-nav-buttons>
<ion-content>
    <div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length" ng-click="fullscreen($index)">
            <ion-scroll zooming="true" style="width: 100%; height: 100%">
              <img ng-src="data:image/jpeg;base64,{{images[$index].image}}" width="100%" />
            </ion-scroll>
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length" ng-click="fullscreen($index+1)">
            <img ng-src="data:image/jpeg;base64,{{images[$index + 1].image}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length" ng-click="fullscreen($index+2)">
            <img ng-src="data:image/jpeg;base64,{{images[$index + 2].image}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length" ng-click="fullscreen($index+3)">
            <img ng-src="data:image/jpeg;base64,{{images[$index + 3].image}}" width="100%" />
        </div>
    </div>
</ion-content>

app.js：

imageApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state("firebase", {
        url: "/firebase",
        templateUrl: "templates/firebase.html",
        controller: "FirebaseController",
        cache: false
    })
    .state("fullscreen", {
        url: "/fullscreen",
        templateUrl: "templates/fullscreen.html",
        controller: "SecureController",
        params:      {'index': null, 'anotherKey': null}
    })
    .state("secure", {
        url: "/secure",
        templateUrl: "templates/secure.html",
        controller: "SecureController"
    }),
$urlRouterProvider.otherwise("/firebase");});


imageApp.controller("SecureController", function($state, $scope, $ionicHistory, $firebaseArray, $cordovaCamera) {


$scope.images = [];
$scope.index = 0;

var fbAuth = fb.getAuth();
if(fbAuth) {
    var userReference = fb.child("users/" + fbAuth.uid);
    var syncArray = $firebaseArray(userReference.child("images"));
    $scope.images = syncArray;
} else {
    $scope.go("firebase");
}


$scope.fullscreen = function(index) {

    $scope.index = index;
    //$state.go("fullscreen", { 'index':index });
    $state.go('fullscreen', { 'index': index, 'anotherKey': 'This is a test' })
}

$scope.upload = function() {
    var options = {
        quality : 75,
        destinationType : Camera.DestinationType.DATA_URL,
        sourceType : Camera.PictureSourceType.CAMERA,
        allowEdit : true,
        encodingType: Camera.EncodingType.JPEG,
        popoverOptions: CameraPopoverOptions,
        targetWidth: 500,
        targetHeight: 500,
        saveToPhotoAlbum: false
    };
    $cordovaCamera.getPicture(options).then(function(imageData) {
        syncArray.$add({image: imageData}).then(function() {
            alert("Image has been uploaded");
        });
    }, function(error) {
        console.error(error);
    });
}});

最后点击任意图片时的全屏（fullscreen.html）：

<ion-view title="Image Full screen" ng-init="">
<ion-content>
        <div class="col col-100">
            <img ng-src="data:image/jpeg;base64,{{images[index].image}}" width="100%" />
        </div>
</ion-content>

这是罕见的，因为“图像”被正确读取，但“索引”总是0值，我开始尝试使用var像图像，我的意思是：

    $scope.images = [];
$scope.index = 0;

这些行获取图像数组但索引仅在controller.js中修改，但在fullscreen.html中为0 .....我不知道发生了什么事情

Answer 1

你可以创建服务＆＃34;上下文＆＃34;在哪里写下你的活动形象＆＃34;路径。所以你不需要使用状态参数。

moreOver这不解决为什么$ index是imutable ...

服务例证：

`angular.module('app.contextService', [])
.service('sContext', function sContext ( $log) {
var me = this;
me.index = null;
`})

将其注入您的卡控制器：

     .controller('cardControler', function cardControler($scope, $log,sContext ) {

$scope.fullscreen = function(index) {

    sContext.index = index
    $state.go('fullscreen')
}

    })

并在全屏显示：

      .controller('cardControler', function cardControler($scope, $log,sContext ) {
var me = this;
me.sContext = sContext;

//now you can read you value in html with: <controllerAlias>.sContext.index

    })

使用别名是一种很好的做法。但如果它打扰你，你可以在$ scope上发布var。（me =＆gt; $ scope）。除了在服务方面，当然没有美元范围

离子将图像位置传递到新屏幕（$ state.go）

1 个答案: