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;

我宁愿避免作用域并从组件的控制器中引用表单。

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

Answer 1

您可以将表单名称设为 name="vm.changePinForm" 使用 vm（控制器别名）。

然后您可以轻松地访问您控制器中的 vm.changePinForm.$invalid。通过它，您不依赖于控制器内部的 $scope。

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

angular 组件中的参考表单没有范围

reference form in angular component without scope

javascript

angularjs

angularjs-controller

angularjs-components