从孤立作用域访问模板作用域

Question

我正在尝试实现一个AngularJS指令，它有自己的独立作用域，以便使它在同一个页面中可重用。此指令由另一个文件中的模板描述，因此我使用templateUrl选项。

app.directive('inputSettings', function () {
    return {
        restrict: 'E',
        transclude: true,
        templateUrl: 'templates/admin/inputSettingsTemplate.html',
        controller: 'InputSettingsCtrl',
        scope: {
            settingkey: '=',
            value: '=',
            range: '=',
            check: '=',
            autosave: '='
        }
    };
});

在这个模板中，我有一个名为form的表单。

<form name="form" class="settingForm" novalidate>
    <div class="form-group" ng-class="{ 'has-error' : form.input.$invalid, 'has-success' : form.input.$valid }">
        <input class="form-control" name="input" type="text" ng-model="valueInput" />
        <p ng-show="form.input.$invalid && !form.input.$pristine" class="help-block" translate="{{ 'inputSettingErrorMessage' | translate:translationData }}"></p>
    </div>
</form>

我遇到的问题是，我希望能够使用指令控制器中的如下代码来设置模板内输入的有效性：

$scope.form.input.$setValidity("input", true);

但是当我试图执行这样的代码时，我有一个错误。似乎$scope不知道表单，所以我不能在指令的控制器内与表单交互。

你知不知道？我做错什么了吗？

提前谢谢！

Answer 1

实际上，我设法使我的代码工作在最低数量的更改。我不知道这是否是个好答案，但对我来说，这是一种魅力。

我只是将<form>标记替换为<ng-form>，现在它工作得很好。这意味着我的指令的控制器现在可以通过名称访问表单。

Answer 2

通常，在指令中，为了设置一个元素的有效性，我们需要对该指令使用ngModel，然后尝试使用ngModelController设置该元素的$validity。

Answer 3

您已经拥有了该目录的控制器，您可以使用该控制器来操作数据。

function InputSettingsCtrl(){
  var vm = this;
  console.log(vm);
}

还记得将控制器添加到指令中

controllerAs: 'ctrl',

像这样，您可以将变量从控制器绑定到视图。