Question

我想要做的是能够在同一main_frag1中使用具有不同属性的指令。主要目标是在指令的输入（ng-model）发生变化时运行不同的代码。这就是我现在所拥有的：

Fragment

在html中运行良好，例如：

ng-app

我将使用不同的ng-model和ng-change函数进行输入，控制器使用动态名称来获取$ scope变量（$ scope.var1Change）。

当我想在另一个模板中使用此指令时，问题就开始了。

app.directive('customInput',
    function ($compile) {
        var customInputDefinitionObject = {
            restrict: 'E',
            replace: true,
            scope: {
                ident: '@'
            },
            template: '<input type="text" >',
            controller: 'customInputController',
            compile: function (tElement, tAttrs) {
                $('input').removeAttr('ident')
                    .attr('ng-model', tAttrs.ident)
                    .attr('ng-change', tAttrs.ident + 'Change()');

                var elemLinkFn = $compile(tElement);
                return function (scope, element) {
                    elemLinkFn(scope, function (clone) {
                        element.replaceWith(clone);
                    })
                }
            }
        }
        return customInputDefinitionObject;
    });

在这种情况下，如果我要在HTML中使用它，例如：

<custom-input ident="var1"></custom-input>
<custom-input ident="var2"></custom-input>

我得到了什么：

app.directive('customInputGroup', function ($compile) {
    var customInputGroupDefinitonObject = {
        restrict: 'E',
        replace: true,
        scope: {
            rident: '@',
        },
        template:''+
        '<div>'+
           '<custom-input id="first"></custom-input>'+
           '<custom-input id="second"></custom-input>'+
        '</div>',
        controller: 'customInputGroupController',
        compile: function (elem, attrs) {
            $('#first', elem).removeAttr('id').attr('ident', attrs.rident + 'Start');
            $('#second', elem).removeAttr('id').attr('ident', attrs.rident + 'End');

            var rangeLinkFn = $compile(elem);
            return function (scope, element) {
                rangeLinkFn(scope, function (clone) {
                    element.replaceWith(clone);
                })
            }
        }
    }
    return customInputGroupDefinitonObject;
});

对于第三个渲染输入，<custom-input-group rident='sg'></custom-input-group>无效。

如果在inputGroup指令中设置<div> <input ng-model="sgEnd" ng-change="sgEndChange()"> <input ng-model="sgEnd" ng-change="sgEndChange()"> <input ng-model="sgEnd" ng-change="sgEndChange()"> </div>，我只需要“输入”呈现，但它们都具有相同的ng-change和terminal:ture。

那么我怎样才能让它呈现这样的东西：

ng-model

如果你知道如何让我知道“如何”而不是“为什么”这么好。提前谢谢。

在另一个指令的模板中重用指令multiplie times和dynamic属性

0 个答案: