angularjs - 如何创建复制现有指令的可重用 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>

<强> updated jsfiddle

Answer 1

绑定(bind) Controller 并轻松注入(inject)$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) {}
});