2016-10-28 17 views
-1

$scopeのデータがページに表示されません。
同じコントローラを使用している2つのビューがあります。

私はこの見解を持っている、と私は私のコントローラ

$scope.editIssue = function(id) { 
    $state.go('edit-issue'); 

    $http.get(Configuration.API + 'api/issue/' + id) 
    .then(function successCallback(response) { 
     $scope.issueToEdit = response.data; 
     console.log($scope.issueToEdit); 
    }); 
}; 

[編集発行ビューで編集発行ボタン

<div class="container" data-ng-init="adminInit()"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <div class="page-header text-center"> 
     <h1>Issues Admin</h1> 
     <button type="button" class="btn btn-primary" ui-sref="add-issue"> 
      Add Issue 
     </button> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12"> 
     <h3>Current Issues</h3> 
     <ul ng-repeat="issue in issues"> 
     <li> 
      <strong>{{issue.title}}</strong> - Current Status: 
      <strong>{{issue.status}}</strong> 
      <div ng-hide="true" class="btn btn-xs btn-primary glyphicon glyphicon-pencil" ng-click="editIssue(issue._id)"></div> 
      <div class="btn btn-xs btn-primary glyphicon glyphicon-pencil" ng-click="editIssue(issue._id)"></div> 
      <div class="btn btn-xs btn-danger glyphicon glyphicon-remove" ng-click="deleteIssue(issue._id)"></div> 
     </li> 
     <ul> 
      <li>{{issue.description}}</li> 
      <li>Issue Logged at: {{issue.timestamp | date:'MM/dd/yyyy @ h:mma'}}</li> 
     </ul> 
     </ul> 
    </div> 
    </div> 
</div> 

そして、これをクリックしてい

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <div class="page-header text-center"> 
     <h1>Edit Issue</h1> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12"> 
     <form name="frm" ng-submit="updateIssue()"> 
     <div class="form-group"> 
      <label for="editIssueTitle">Issue Title</label> 
      <input type="text" name="editIssueTitle" id="editIssueTitle" class="form-control" ng-model="issueToEdit.title" required/> 
     </div> 
     <div class="form-group"> 
      <label for="editIssueDesc">Issue Description</label> 
      <textarea name="editIssueDesc" id="editIssueDesc" class="form-control" cols="60" rows="16" ng-model="issueToEdit.description" required></textarea> 
     </div> 
     <div class="form-group"> 
      <label for="editIssueStatus">Issue Status</label> 
      <select name="editIssueStatus" id="editIssueStatus" class="form-control" ng-model="issueToEdit.status" required> 
      <option value="Identified">Identified</option> 
      <option value="Investigating">Investigating</option> 
      <option value="Monitoring">Monitoring</option> 
      <option value="Resolved">Resolved</option> 
      </select> 
     </div> 
     <button class="btn btn-default" ng-disabled="frm.$invalid">Go</button> 
     </form> 
    </div> 
    </div> 
</div> 

ただし、issueToEditのデータは表示されません。 console.log行にrライトデータ

{ 
"_id": "58135b6e3987b8a90c4fc15b" 
"title": "Test" 
"description": "Testset" 
"timestamp": "2016-10-28T14:06:38.284Z" 
"status": "Monitoring" 
"__v": 0 
} 

これはどうして起こっているのですか?

編集:私が編集問題のページに着くときに、issueToEditデータをフォームに表示して、情報を更新して保存するようにします。

EDIT2は:ここでは私の完全なコントローラであると

app.controller('issuesController', ['$scope', '$http', '$state', '$interval', 'auth', 'Configuration', function($scope, $http, $state, $interval, auth, Configuration) { 

    $scope.isLoggedIn = auth.isLoggedIn; 

    $scope.getIssues = function() { 
     console.log('retrieving issues'); 
     $http.get(Configuration.API + 'api/issue') 
      .success(function(data) { 
       $scope.issues = data; 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
    }; 

    $scope.addIssue = function() { 
     var nIssue = { 
      'title': $scope.newissue.title, 
      'description': $scope.newissue.description, 
      'timestamp': new Date(), 
      'status': $scope.newissue.status 
     } 

     $http.post(Configuration.API + 'api/issue', nIssue) 
      .success(function(data) { 
       $state.go('admin'); 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
    }; 

    $scope.editIssue = function(id) { 
     $state.go('edit-issue'); 

     $http.get(Configuration.API + 'api/issue/' + id) 
     .then(function successCallback(response) { 
      $scope.issueToEdit = response.data; 
      console.log($scope.issueToEdit); 
     }); 
    }; 

    $scope.updateIssue = function() { 
     //ToDo add this logic 
    }; 

    $scope.deleteIssue = function(id) { 
     $http.delete(Configuration.API + 'api/issue/' + id) 
      .success(function(data) { 
       $scope.issues = data; 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
    }; 

    $scope.adminInit = function() { 
     $scope.getIssues(); 
     $interval($scope.getIssues, 60000); 
    }; 

    $scope.issueInit = function() { 
     $scope.getIssues(); 
     $interval($scope.getIssues, 60000); 

     $(".devInfo").text(navigator.userAgent); 
     $(".flashVersion").text(FlashDetect.raw); 
    }; 
}]); 

app.js

var app = angular.module('supportWebsite', ['ui.router']); 

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) { 

    $urlRouterProvider.otherwise('/articles'); 

    $stateProvider 
     .state('home', { 
      url: '/', 
      templateUrl: '/pages/issues/index.html', 
      controller: 'issuesController' 
     }) 
     .state('admin', { 
      url: '/admin', 
      templateUrl: '/pages/issues/admin/index.html', 
      controller: 'issuesController', 
      onEnter: ['$state', 'auth', function($state, auth) { 
       if (!auth.isLoggedIn()) { 
        $state.go('login'); 
       } 
      }] 
     }) 
     .state('add-issue', { 
      url: '/admin/add-issue', 
      templateUrl: '/pages/issues/admin/add.html', 
      controller: 'issuesController', 
      onEnter: ['$state', 'auth', function($state, auth) { 
       if (!auth.isLoggedIn()) { 
        $state.go('login'); 
       } 
      }] 
     }) 
     .state('edit-issue', { 
      url: '/admin/edit-issue', 
      templateUrl: '/pages/issues/admin/edit.html', 
      controller: 'issuesController', 
      onEnter: ['$state', 'auth', function($state, auth) { 
       if (!auth.isLoggedIn()) { 
        $state.go('login'); 
       } 
      }] 
     }); 

    $locationProvider.html5Mode(true); 
}]); 
+0

問題は、状態を変更しているときにコントローラが再度読み込まれることです。この瞬間、あなたはあなたのデータを失っています。最初に状態を変更してから、データをロードする必要があります。または、状態の代わりにng-hideを使用してビューを切り替えることもできます。 – Gerfried

+0

コントローラのコードは何ですか?それはあなたがスコープに割り当てているものを見るのを助けるでしょう – Juan

+0

それは私がやっていることではありませんか? $ state.go、次にhttpコール? – Greyhammer

答えて

3

をapp.jsあなたの方法は、別の状態に行くために$状態サービスに指示します。これは、新しい状態に関連付けられたビューによるビューを置き換え、新しい$スコープを作成し、この新しい$スコープを使用して新しいコントローラインスタンスを作成します。

現在のコントローラの$スコープに入れたものは無関係で無用です。もう1つのステートは別の$スコープと別のコントローラを使います。

新しい状態のパラメータとして編集するには、問題のIDを渡す必要があります。そして、この新しい状態のコントローラ(またはその解決機能の1つ)は、このIDを使用して問題を編集する必要があります。

同じコントローラーと同じスコープを使用して同じビューを維持したい場合は、別の状態にナビゲートしないでください。

+0

フルコントローラーを含めるように質問を編集しました。私は1つのコントローラを使用しています。私は、「問題」に関するすべての論理が1か所にあるべきだと考えていました。何が起こっているかを簡単に見つけて見てください。状況が変わるだろうか? – Greyhammer

+0

はい。基本的に、1つのコントローラ= 1ビュー。 1つのコントローラを複数のビューに使用すると、必要以上に複雑で膨大なものになります。コントローラ間で共通のロジックが必要な場合は、共有サービスを使用します。 –

+0

ありがとう、ありがとう。リファクタリングする時間。再び。 – Greyhammer

関連する問題