主細節CONTROLL不

Question

新的一頁

顯示內容，我通過點擊按鈕，試圖掌握詳細的導航從給定的數據

page1.html

<a class="button icon button-block button-calm icon-right ion-android-arrow-dropright-circle" ng-class="{'button-balanced': file.status == 'open', 'button-assertive': file.status == 'closed'}" href="#filedetails" ng-repeat="file in file | orderBy:'-status'" ng-click="onSelectFile(n)" >File Ref No:{{file.num}}<br> 
     Description:{{file.descript}}<br> 
     Status:{{file.status}}</a><br> 

page2.html

<div class="col">: {{file.num}}</div> 
     <div class="col">: {{file.casedet}}</div> 

查看詳細

控制器頁面

.controller('caseFileCtrl', function($scope,$http,$location) { 
    $scope.file=[ 
     {num:"1",descript:"consumer",status:"closed",casedet:"cleared"}, 
     {num:"2",descript:"literal",status:"open", casedet:"process"}, 
     {num:"3",descript:"literal",status:"closed", casedet:"cleared"}, 
     {num:"4",descript:"consumer",status:"open",casedet:"proess"} 
       ]; 
$scope.onSelectFile = function(n) 
{ 
    $location.url('/casefile/'+ n.num); 
} 



}) 

    .controller('fileDetailsCtrl', function($scope,$stateParams) { 
    $scope.file={num:$stateParams.num, casedet:'file'+$stateParams.casedet}; 

    }) 

我不能提前

Answer 1

查看NUM和casedet在其他頁面

感謝您可以使用一個服務控制器之間的數據共享。

js/services.js

angular.module('starter.services', []) 

.factory('File', function($log) { 
    this.files = []; 
    return { 
     /** 
     * Get the list of files. 
     * @returns Returns the list of files. 
     */ 
     get: function(){ 
      return this.files; 
     }, 
     /** 
     * Set the list of files. 
     * @param files The files to set. 
     */ 
     set: function(files){ 
      this.files = files; 
     } 
    }; 
}); 

包括在你的index.html：

<!-- Your scripts --> 
<script src="js/services.js"></script> 

包括在你的app.js依賴關係：

angular.module('yourModuleName', [/* Your dependencies */, 'starter.services']) 

您app.js

配置部分

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: 'templates/menu.html', 
    controller: 'AppCtrl' 
    }) 

    .state('app.caseFileCtrl', { 
     url: '/casefile', 
     views: { 
     'menuContent': { 
      templateUrl: 'templates/files.html', 
      controller: 'caseFileCtrl' 
     } 
     } 
    }) 

    .state('app.single', { 
    url: '/casefile/:fileId', 
    views: { 
     'menuContent': { 
     templateUrl: 'templates/file.html', 
     controller: 'fileDetailsCtrl' 
     } 
    } 
    }); 
    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/app/casefile'); 
}); 

使用您的File服務js/controllers.js

angular.module('starter.controllers', []) 

.controller('caseFileCtrl', function($scope, File, $state) { 
    $scope.files = [ 
    {num:"1",descript:"consumer",status:"closed",casedet:"cleared"}, 
    {num:"2",descript:"literal",status:"open", casedet:"process"}, 
    {num:"3",descript:"literal",status:"closed", casedet:"cleared"}, 
    {num:"4",descript:"consumer",status:"open",casedet:"proess"} 
    ]; 

    File.set($scope.files); 

    $scope.onSelectFile = function(n){ 
    console.log("Go to:", '/casefile/'+ n); 
    $state.go("app.single", {fileId: n}); 
    }; 

}) 

.controller('fileDetailsCtrl', function($scope, $stateParams, $filter, File) { 
    console.log("fileId:", $stateParams.fileId); 
    $scope.file = $filter('filter')(File.get(), {num: $stateParams.fileId})[0]; 
}); 

你可以看到plunker一個可行的解決方案。

一些附加分：

• 避免使用ng-repeat="file in file"。我更喜歡這樣的：ng-repeat="file in files"
• 最好重定向到另一條路線使用$state.go而不是$location;
• 如果您在a標記上使用ng-click指令，並且您使用它將其重定向到另一個視圖，則最好不要包含href="#filedetails"屬性以避免雙重重定向;
• a它可以用於元素列表，但也可以看看ion-list。