Angular.js在相同的代码中返回未定义的不同页面

时间:2015-12-08 09:50:53

标签: javascript html angularjs

应用程序在sails.js上作为后端运行,Angular作为前端运行, 它是CRUD应用程序,有两个页面,一个是主要的仪表板,另一个是具有高级搜索功能的Search.html。

这里有两页,使用相同的ng-repeat注​​入相同的html页面,其中包含使用相同服务的相同控制器的相同功能。

在这里怎么回事,我点击了删除按钮,它显示了fireCancelQuoteModal(引用),然后我点击确认并点击ng-click = cancelQoute,它通过decisionFrom而没有任何问题。

现在在cancelQouteModalCtrl中,qoute和decisionForm都没有问题地传递给qouteLogService,其中qoute仍在那里,qoutelog包含cancellationReason。

和qoute.post应该返回createdQouteLog但它不在搜索.html中并且在Dashboard.html中

当我开始跟踪并观察var时,当代码进入Angular.js和后面的堆栈时,一切都消失了

$ scope.apply()/ $ scope.digest()/$scope.eval()/ processQueue()

此处是Dashboard.html和search.html

的表格
       <table class="table table-striped table-responsive" ui-jq="footable" data-filter="#filter19"
                   data-page-size="{{pageControl.pageSize}}">
              <thead>
              <tr>
                <th data-type="date">Last Update</th>
                <th>Client</th>
                <th>Phone</th>
                <th>Dealer</th>
                <th>Assigned To</th>
                <th data-type="numeric">Status</th>
                <th>Progress</th>
                <th>Actions</th>
              </tr>
              </thead>
              <tbody>

              <tr ng-repeat="quote in allQuotes | orderBy: '-updatedAt' track by quote.id"
                  ng-init="latestQuoteLog=findLatestQuoteLog(quote.quoteLogs)">
                <td class="text-center" data-value="{{latestQuoteLog.createdAt}}">
                  {{latestQuoteLog.createdAt | date : 'dd-MMM-yy hh:mm a'}}
                </td>

                <td>{{quote.client.name}}</td>

                <td>{{quote.client.phone | tel}}</td>

                <td ng-if="quote.dealershipCompany">{{quote.dealershipCompany.name}}</td>
                <td ng-if="!quote.dealershipCompany">Online</td>

                <td>{{username(latestQuoteLog.assignedTo)}}</td>

                <td data-value="{{latestQuoteLog.status}}">
                    <span class="label bg-{{quoteStatusIdToStatusName[latestQuoteLog.status]}}">
                      {{quoteStatusPrettyNames[latestQuoteLog.status]}}
                    </span>
                </td>
                <td>
                  <div class="progress-xs progress ng-isolate-scope w-sm m-t-sm" type="info">
                    <div class="progress-bar progress-bar-primary" role="progressbar"
                         aria-valuenow="{{quoteStatusProgress[latestQuoteLog.status]}}" aria-valuemin="0"
                         aria-valuemax="100" ng-
                         style="width: {{quoteStatusProgress[latestQuoteLog.status]}}%;"></div>
                  </div>
                </td>
                <td>
                  <div class=" btn-group">
                    <button class="btn btn-sm btn-icon btn-default"
                            ng-if="latestQuoteLog.status != quoteStatus.quoteCancelled"
                            ng-click="showCancelQuoteModal(quote)">
                      <i class="glyphicon glyphicon-remove" tooltip="Cancel Quote"></i>
                    </button>
                    <button class="btn btn-sm btn-icon  btn-default" ng-click="editQuote(quote)">
                      <i class="glyphicon  glyphicon-edit" tooltip="Edit Quote"></i>
                    </button>
                    <button class="btn btn-sm btn-icon  btn-default" ng-click="viewQuote(quote)">
                      <i class="glyphicon  glyphicon-eye-open" tooltip="View Quote"></i>
                    </button>
                    <button class="btn btn-sm btn-icon  btn-default"
                            ng-click="showModal(quote, roles.broker, 'AT', latestQuoteLog)"
                            ng-if="canAssign(latestQuoteLog, roles.broker)">
                      <i class="glyphicon  glyphicon-arrow-right" tooltip="Assign To Broker"></i>
                    </button>
                    <button class="btn btn-sm btn-icon  btn-default"
                            ng-click="showModal(quote, roles.processor, 'AT', latestQuoteLog)"
                            ng-if="canAssign(latestQuoteLog, roles.processor)">
                      <i class="glyphicon  glyphicon-arrow-right" tooltip="Assign To Processor"></i>
                    </button>
                    <button class="btn btn-sm btn-icon  btn-default" ng-click="showModal(quote, roles.broker, 'CA')"
                            ng-if="canChangeAssignee(latestQuoteLog, roles.broker)">
                      <i class="glyphicon  glyphicon-transfer" tooltip="Change Assignee"></i>
                    </button>
                    <button class="btn btn-sm btn-icon  btn-default"
                            ng-click="showModal(quote, roles.processor, 'CA')"
                            ng-if="canChangeAssignee(latestQuoteLog, roles.processor)">
                      <i class="glyphicon  glyphicon-transfer" tooltip="Change Assignee"></i>
                    </button>
                  </div>
                </td>
              </tr>

              </tbody>
              <tfoot class="hide-if-no-paging">
              <tr>
                <td colspan="9" class="text-center">
                  <ul class="pagination"></ul>
                </td>
              </tr>
              </tfoot>
            </table>

这里取消模式

        <script type="text/ng-template" id="cancelQuoteModal.html">

      <div class="modal-header">
        <form name="decisionForm" class="form-horizontal wrapper input-set">
          <div class="col-md-10">
            <label>
              <h4 class="font-thin">Why it is not sold ?</h4>
            </label>
            <select class="form-control" ng-model="reasonForRejection" name="reasonForRejection" required>
              <option ng-repeat="reason in rejectionReasons" value="{{reason}}">
                {{reason}}
              </option>
            </select>
            <small
              ng-show="(decisionForm.reasonForRejection.$invalid && !decisionForm.reasonForRejection.$pristine) || showErrors"
              class="b-light  m-t-n-sm m-b font-thin text-danger m-r">Reason is required.
            </small>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button class="btn btn-sm btn-success" ng-click="cancelQuote(decisionForm)">Confirm Quote Cancellation</button>
        <button class="btn btn-warning" ng-click="cancelBox()">Close!</button>
      </div>

    </script>

这里是CancelModalController

 .controller('cancelQuoteModalCtrl', ['$scope', '$modalInstance', 'quoteLogService', 'rejectionReasons', 'quote', function ($scope, $modalInstance, quoteLogService, rejectionReasons, quote) {
    $scope.rejectionReasons = rejectionReasons;
    $scope.reasonForRejection;

    $scope.cancelQuote = function (decisionForm) {
      if (decisionForm.$invalid) {
        $scope.showErrors = true;
      } else {
        quoteLogService.create(quote, {
          'status': 'quoteCancelled',
          'cancellationReason': $scope.reasonForRejection
        }, function (createdQuoteLog) {
          $modalInstance.close('Quote cancelled successfully!');

        }, function (err) {
          $modalInstance.dismiss('Error creating new quoteLog');
          console.log('Error creating new quoteLog', err);
        });
      }
    };

    $scope.cancelBox = function () {
      $modalInstance.close();
    };

  }]);

这里是QouteLogService.js

QuoteLogModule
.factory('quoteLogService', ['$localStorage', '$state', 'LoggedInRestangular', function($localStorage, $state, LoggedInRestangular) {
    return {
        create: function(quote, quotelog, success, error) {
            quote.post('quotelog', quotelog).then(function(createdQuoteLog) {
                success(createdQuoteLog);
            }, function(err) {
                error(err);
            });
        },

0 个答案:

没有答案