$ scope zeigt keine Daten an

Question

Die $scope Daten werden nicht auf der Seite angezeigt.
Ich habe 2 Ansichten, die den gleichen Controller verwenden.

Ich habe diese Ansicht, und ich bin auf Bearbeiten Ausgabe Taste

<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> 

Und dies in meinem Controller

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

dann die edit-Ausgabe Ansicht

<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> 

Aber die issueToEdit Daten werden nie angezeigt Die console.log Zeile zeigt die r Lichtdaten

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

Eine Idee, warum das passiert?

EDIT: Lassen Sie mich ein wenig klären, wenn ich auf der Edit-Problemseite lande, möchte ich die issueToEdit Daten im Formular angezeigt, so dass ich dann die Informationen aktualisieren und dann speichern kann.

EDIT2: Hier ist meine volle Steuerung und app.js

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

Answer 1

Ihre Methode, um den $ Staatsdienst sagt in einem anderen Zustand zu gehen. Dadurch wird die Ansicht durch die Ansicht ersetzt, die mit dem neuen Status verknüpft ist, ein neuer $ -Bereich erstellt und eine neue Controller-Instanz mit diesem neuen $ -Bereich erstellt.

Also was auch immer Sie in den $ Bereich des aktuellen Controllers setzen, ist irrelevant und nutzlos: Der andere Zustand verwendet einen anderen $ Scope und einen anderen Controller.

Sie müssen die ID des Problems übergeben, um sie als Parameter des neuen Status zu bearbeiten. Und der Controller dieses neuen Status (oder eine seiner Auflösungsfunktionen) sollte diese ID verwenden, um das Problem zu bearbeiten.

Wenn Sie mit demselben Controller und demselben Bereich auf derselben Ansicht bleiben möchten, sollten Sie nicht in einen anderen Status wechseln.