如何创建复制现有指令的可重用AngularJs指令

Question

我正在为我们的应用程序中的常见控件创建一些可重用的指令.

例如,我们有一个用于数量文本框的html的剪辑

<div class='amount'>
    <input type='text' ng-model='dollars'/>
</div>

从那里我开始创建我的指令:

app.directive("amount", function(){
    return {
        restrict: "E",
        template: "<div class='amount'><input type='text'/></div>",
        replace: true
    }
});

其中呈现以下内容 <html/>

<div class="amount ng-pristine ng-valid" ng-model="dollars">
    <input type="text">
</div>

现在ng-model是在<div/>这不是我想要的东西,所以我需要创建一个范围,它附加到ngModel东西很开心了.

app.directive("amount", function(){
    return {
        restrict: "E",
        scope:{
            ngModel: "="
        },
        template: "<div class='amount'><input type='text' ng-model='ngModel'/></div>",
        replace: true
    }
});

一切正常,但是我可以说我还想添加一个ngChange指令,这是否意味着我再次需要改变我scope的包含ngChange: "="？像这样

app.directive("amount", function(){
    return {
        restrict: "E",
        scope:{
            ngModel: "=",
            ngChange : "="
        },
        template: "<div class='amount'><input type='text' ng-model='ngModel'/></div>",
        replace: true
    }
});

问题

我是否需要不断修改指令范围以包含我可能需要的无限数量的其他指令？或者有没有办法将<amount/>元素上的指令复制到<div/>但不是<input/>

例如

<amount my-awesome-directive="" ng-disabled="form.$invalid" ng-model="dollarsAndCents" ng-click="aClick()" ng-show="shouldShow()"/>

变成

<div class="amount">
    <input my-awesome-directive="" type="text" ng-disabled="form.$invalid" ng-click="aClick()" ng-show="shouldShow()" ng-model="dollarsAndCents"/>
</div>

在编译前/后期间可以做些什么来复制它们,还是我认为这一切都错了？

更新

通过简单地循环遍历所有属性并使用$compile()服务,我能够获得一些工作.它确实有效,但这是正确的吗？

app.directive("amount", function ($compile) {
    return {
        restrict: "E",
        template: "<div class='amount'><input type='text' /></div>",
        replace: true,
        compile: function compile(tElement, tAttrs) {
            return function (scope, iElement, iAttrs) {
                var attributes = $(iElement).prop("attributes");
                var $input = $(iElement).find("input");
                $.each(attributes, function () { //loop over all attributes and copy them to the <input/>
                    if (this.name !== "class") {
                        $input.attr(this.name, this.value);
                    }
                });
                $compile($input)(scope);  //compile the input
            };
        }
    };
});

鉴于以下<html/>如果添加任何指令在<amount/>它被向下复制到<input/>

<div ng-app="app">
        <amount ng-model="dollars" ng-change="changed = 'I Changed!!!'" ng-click="clicked= 'I Clicked It!'" name="amount"></amount>
         <h1>{{dollars}}</h1>
         <h2>{{changed}}</h2>
         <h3>{{clicked}}</h3>
        <input type="button" value="Remove" ng-click="items.splice(items.indexOf(item), 1)"/>
        <hr/>
</div>

更新了jsfiddle

Answer 1

绑定控制器并$scope轻松注入。

.controller('Amount', ['$scope', function($scope) {
    $scope.myMoney = '2';
}])

.directive("amount", function(){
    restrict: 'EA',
    replace: true,
    controller: 'Amount',
    template: "<div class='amount'><input type='text' ng-model='myMoney'/></div>",
    //Cleaner to include as URL if the partial is bigger.
    //templateUrl: '/views/amount.html',
    link: function(scope, controller) {}
});