Question

鉴于我有以下两个指令。

1：Angular UI select - 此指令使用隔离范围。

2：myDirective - 在我的自定义指令中我也使用isolate scope来访问ngModel的值

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

 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模型值

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();
                        });
                }
            };
        }
    ]);

Answer 1

如果您仅使用隔离范围来获取选择的ng模型，则可以在不使用隔离范围的情况下执行此操作。

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

Answer 2

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

myDirective

Answer 3

使用指令中的'require'可以访问另一个指令的控制器。然后，您可以在指令实现的参数中注入该控制器。但是，如果执行此操作，则无法使用隔离范围。

Answer 4

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

1个元素的多个指令

4 个答案: