没有范围的角度分量中的参考形式答案

【问题标题】：reference form in angular component without scope没有范围的角度分量中的参考形式
【发布时间】：2016-12-25 06:19:07
【问题描述】：

目前我有这个组件定义：

    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;

我宁愿避开范围并从组件的控制器中引用表单。

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

【问题讨论】：

标签： javascript angularjs angularjs-controller angularjs-components

【解决方案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;
    };      
  }
];

【讨论】：