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添加到指令

controllerAs: 'ctrl',

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

Answer 4

使用$ rootScope。它是全球性的。它包含所有$ scopeS .. 像

$rootScope.data = data; $scope.data = $rootScope.data

从隔离范围访问模板范围

4 个答案: