从隔离范围访问模板范围答案

【问题标题】：Access to template scope from isolated scope从隔离范围访问模板范围
【发布时间】：2016-01-05 23:45:28
【问题描述】：

我正在尝试实现一个 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 似乎不知道表单，所以我无法在指令的控制器中与表单交互。

你有什么想法吗？是不是我做错了什么？

提前致谢！

【问题讨论】：

您何时尝试执行此代码？直接在控制器初始化期间？
在 $scope.valueInput 变量的观察者中没有。实际上，我想在值更改时更新输入的有效性。
我建议检查新值是否与旧值不同。可能是第一次（在初始化期间）无论如何都会触发观察者，此时表单不在范围内，因为控制器在链接之前运行
我认为这不是问题，因为只有当我尝试更改输入中的值时才会出现错误。所以我猜初始化已经完成了一段时间。
介意做个小插曲吗？

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

实际上，我设法使我的代码只需进行最少的更改即可工作。我不知道这是否是一个好的答案，但它对我来说就像一个魅力。

我只是用<ng-form> 替换了<form> 标签，现在它可以完美运行了。这意味着我的指令的控制器现在可以通过它的名称访问表单。

【讨论】：

你是不是在另一个
标签里面做指令？这可以解释问题
是的！我猜想父表单和指令中的表单之间存在冲突。嵌套表单是个坏主意吗？我应该删除模板指令中的那个吗？
Ng-form 允许嵌套，而 form 不允许。表单应该只是最顶层的，并且可以有任意数量或深度的 ng-form 子级。
表单是否可以访问 ng-forms 中的输入？
感谢您的宝贵时间！你真的帮了我;)

【解决方案2】：

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

【讨论】：

你有什么例子可以让我理解你的意思吗？提前致谢。

【解决方案3】：

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

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

还要记得将 controllerAs 添加到你的指令中

controllerAs: 'ctrl',

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

【讨论】：

【解决方案4】：

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

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

【讨论】：