javascript - 不带范围的 Angular 分量的引用形式

Question

目前我有这个组件定义:

    var controller = ['$http', '$timeout', '$scope', function($http, $timeout, $scope) {
        this.isInvalid = function() {
            return $scope.changePinForm.$invalid;
        };      
    }];

    var component = {
        templateUrl: path.fromRoot('/application/libs/components/pin-change/view/pin-change.html'),
        controller: controller,
        controllerAs: 'vm'
    };

    angular.module('pin-change', ['confirm-reject', 'compare-validator', 'is-numeric'])
        .component('pinChange', component);
});

通过templateUrl引用此html文件:

<form name="changePinForm" class="form-horizontal">
  <!-- etc. etc. -->
</form>

目前我必须使用范围来引用表单:

$scope.changePinForm.$invalid;

我宁愿避免范围并从组件的 Controller 引用表单。

这可能吗？还是范围仍然是唯一的方法？

Answer 1

您可以使用 vm( Controller 别名)将表单名称设为 name="vm.changePinForm"。

然后您可以轻松访问 Controller 内的vm.changePinForm.$invalid。这样您就不再依赖于 Controller 内的 $scope。

var controller = ['$http', '$timeout', 
  function($http, $timeout) {
    var vm = this;
    vm.isInvalid = function() {
        return vm.changePinForm.$invalid;
    };      
  }
];