1 个元素上的多个指令答案

【问题标题】：multiple directives on 1 element1 个元素上的多个指令
【发布时间】：2015-10-19 04:04:23
【问题描述】：

鉴于我有以下两个指令。

1：Angular UI 选择 - 该指令使用隔离范围。

2: myDirective - 在我的自定义指令中，我还使用隔离范围来访问 ngModel 的值

我收到多指令错误无法共享隔离范围。这就是我在指令中声明隔离范围的方式。

 require: 'ngModel',           
            scope: {
                modelValue: "=ngModel"
            },
            link: function (scope, el, attrs, ctrl) {

我的用法是这样的：

<ui-select myDirective  multiple ng-model="GroupsModel" theme="select2" ng-disabled="disabled" style="width: 300px;" hidden-text-box ">
        <ui-select-match placeholder="groups">{{$item}}</ui-select-match>
        <ui-select-choices repeat="color in Groups ">
            {{color}}
        </ui-select-choices>
    </ui-select>

我的问题是，如果多个指令不能在 1 个元素上一起使用，我如何从我的自定义指令中访问 ngmodel 值，是否有解决方法仍然可以保持绑定？

更新

如果我不使用空的scope: {},，我将无法在我的指令的以下函数中访问所需的 ng models 值

scope.reset = function () {

                            var modelValue =ctrl.$viewValue;

                            $timeout(function () {
                                el[0].focus();
                            }, 0, false);
                        };

这是我的指令：

var app = angular.module('app');
app.directive('resetField', [
        '$compile', '$timeout', '$http', function ($compile, $timeout, $http) {
            return {
                require: 'ngModel',                                
                link: function (scope, el, attrs, ctrl) {

                    // compiled reset icon template
                    var template = $compile('<i ng-show="enabled" ng-mousedown="reset()" class="fa fa-floppy-o" style="padding-left:5px"></i>')(scope);
                    el.after(template);

                    scope.reset = function () {

                        var modelValue =ctrl.$viewValue;

                        $timeout(function () {
                            el[0].focus();
                        }, 0, false);
                    };

                    el.bind('input', function() {
                            scope.enabled = !ctrl.$isEmpty(el.val());
                        })
                        .bind('focus', function() {
                            scope.enabled = !ctrl.$isEmpty(el.val());
                            scope.$apply();
                        })
                        .bind('blur', function() {
                            scope.enabled = false;
                            scope.$apply();
                        });
                }
            };
        }
    ]);

【问题讨论】：

标签： angularjs angularjs-scope angular-directive

【解决方案1】：

如果您仅使用隔离范围来获取选择的 ng-model，则可以不使用隔离范围来执行此操作。

在链接函数中只需使用scope[attrs.ngModel]，您甚至可以对其进行监视（只要ngmodel是对象属性ng-model=obj.prop1）

【讨论】：

我已经用我的指令更新了我的问题，你能看看吗

【解决方案2】：

您可以在一个元素上使用多个指令，问题是在一个元素上应用多个隔离范围无效，您可以使用require 要求myDirective 中的另一个指令：

angular.directive('myDirective', [function(){

    return {
        scope: false,
        require: 'ngModel',
        link: function(scope, element, attr, ctrl){

            scope.modelValue = ctrl.$viewValue;

        }
    }

}])

【讨论】：

对不起，还有一个我没有提到的案例。 MyDirective 有时在没有多个指令的情况下使用。鉴于此，您的解决方案会奏效吗？

【解决方案3】：

在指令中使用“require”可以访问另一个指令的控制器。然后，您可以将该控制器注入指令实现的参数中。但是，如果这样做，则不能使用隔离范围。

【讨论】：

【解决方案4】：

如果您需要使用两个指令，请确保第二个指令不是孤立的。

【讨论】：

但有时，我需要在没有其他指令的情况下使用 myDirective。在这种情况下，如何在没有隔离范围的情况下访问 ngmodel 值？
您将使用的范围将是该元素所在的控制器。您可以修改相应控制器中的变量
我已经用我的指令更新了我的问题，你能看看吗
如果您使用普通指令而不是孤立指令，您可以访问该指令所在的控制器范围，因此您不需要定义范围。该指令的范围是使用该指令的视图的控制器的范围。您可以直接访问 GroupsModel