$ scope不显示数据($scope not displaying data)

$scope数据未显示在页面上。我有2个视图使用相同的控制器。

我有这个观点，我点击编辑问题按钮

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

而这在我的控制器中

$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"> <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行显示正确的数据

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

知道为什么会这样吗？

编辑：让我澄清一点，当我登陆编辑问题页面时，我希望在issueToEdit中显示issueToEdit数据，以便我可以更新信息然后保存。

EDIT2：这是我的完整控制器和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

The $scope data is not displaying on the page. I have 2 views that are using the same controller.

I have this view, and I'm clicking the edit issue button

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

And this in my 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); }); };

then the edit-issue view

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

But the issueToEdit data is never displayed The console.log line displays the right data

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

Any idea why this is happening?

EDIT: Let me clarify a little, when I land on the edit-issue page, I want the issueToEdit data to displayed in the form so that I can then update the info and then save it.

EDIT2: Here is my full controller and 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

最满意答案

您的方法告诉$ state服务转到另一个状态。这将通过与新状态关联的视图替换视图，使用此新的$ scope创建新的$ scope和新的控制器实例。

因此，无论你放在当前控制器的$ scope中，都是无关紧要和无用的：另一个状态使用另一个$ scope和另一个控制器。

您需要将问题的ID作为新状态的参数进行编辑。此新状态（或其解析函数之一）的控制器应使用该ID来编辑问题。

如果要使用相同的控制器和相同的范围保持相同的视图，则不应导航到其他状态。

Your method tells the $state service to go to another state. That will replace the view by the view associated with the new state, create a new $scope, and a new controller instance using this new $scope.

So whatever you put in the $scope of the current controller is irrelevant and useless: the other state uses another $scope and another controller.

You need to pass the ID of the issue to edit as a parameter of the new state. And the controller of this new state (or one of its resolve functions) should use that ID to get the issue to edit.

If you want to stay on the same view, using the same controller and the same scope, then you shouldn't navigate to another state.

更多推荐