Question

页面上未显示$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数据显示在表单中，以便我可以更新信息然后保存。

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

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

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

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

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

如果你想使用相同的控制器和相同的范围保持相同的视图，那么你不应该导航到另一个状态。

$ scope不显示数据

1 个答案: