javascript - 在 AngularJS 中从 html 端访问 $route 的简单方法

Question

有没有办法从 AngularJS 的 html 端访问 $route？

我真的很想在 HTML 中做这样的事情并消除另一个 $scope 函数。 (是的，我知道它不是真正有用的东西):

<button ng-disabled="!route.current.scope.currentform.$valid">

我正在开发一个大型 Angular 应用程序，它在开发周期中有点“落后”。这个时候我们决定实现表单验证(不要问为什么它不是列表中的 1 或 2)。

我目前在页脚“上一个”和“下一个”中使用两个按钮，这两个按钮都需要将 ng-disabled 设置为 !$scope.formname.$valid。这需要跨多个 Controller /页面工作，因为按钮位于 index.html 上我的页脚中。

我现在使用的代码如下所示:

// Want to eliminate this isFormValid() method
$scope.isFormValid = function() {
  if ($route.current) {
    if ($route.current.scope) {
      return !$route.current.scope.currentform.$valid;
    }
  }
};

$scope.prevPage = function() {
  if (angular.isFunction($route.current.scope.PrevAction)) {
    // do stuff particular to the current controller
    $route.current.scope.PrevAction()
  }
};

$scope.nextPage = function() {
  if (angular.isFunction($route.current.scope.NextAction)) {
    // do stuff particular to the current controller
    $route.current.scope.NextAction()
  }
};

对应的按钮代码如下:

<div class="footer">
  <button id="main-prev-button" type="button" class="btn btn-primary previous" ng-click="prevPage($event)" ng-disabled="isFormValid()">Previous</button>
  <button id="main-next-button" type="button" class="btn btn-primary next" ng-click="nextPage($event)" ng-disabled="isFormValid()">Next</button>
</div>

每个页面代码看起来像这样

<ng-form id="currentform" name="currentform">

  <label>Full Name</label>
  <input type="text" class="form-control" ng-model="nl.firstName" id="firstName" placeholder="First Name" name="firstName" ng-minlength="5" ng-maxlength="20" ng-required="true">
  <pre>currentform.firstName.$error = {{ currentform.firstName.$error | json }}</pre>

  <ng-messages for="currentform.firstName.$error">
    <ng-message when="required">You did not enter a field</ng-message>
    <ng-message when="minlength">Your field is too short</ng-message>
    <ng-message when="maxlength">Your field is too long</ng-message>
  </ng-messages>

</ng-form>

Answer 1

将 $route 添加到根作用域 $rootScope，然后使用 $rootScope.$route 在您的 html/ View 中访问它.

例如:

angular.module('myApp').run(['$rootScope', '$route',
    function ($rootScope, $route) {
       $rootScope.$route = $route;
}]);