Question

我需要编写一个可以在输入字段和其他功能中添加按钮的指令。所以，理想情况下我希望有这样的东西

<input type="text"><button ng-click="someAction()" ng-class="{'success': isSuccess()}" ng-disabled="isDisabled()">click me</button>

最终成为

 app.directive('myDirective', ['$q', '$timeout', function ($q, $timeout) {
                   return {
                    restrict: 'A',
                    template: '<button ng-click="someAction()" ng-class="{\'success\': isSuccess()}" ng-disabled="isDisabled()">click me</button>',

                    require: '?ngModel',
                    link: function (scope, element, attrs, ctrl) {

                        scope.isSuccess = function () {
                            ...
                        };

                        scope.isPending = function () {
                           ...
                        };
                        scope.someAction = function () {
                           ...
                        };


....}]);

我的指令的简化代码：

<input><button></button></input>

问题在于，如果我在指令模板中添加此按钮，我最终会得到{{1}}

遗憾的是，创建一个包含输入字段的指令对我来说不是一个选项。如果我需要提供更多信息，请告诉我。

Answer 1

经过一番搜索，我找到了解决方案。您可以通过在指令的链接函数中编译元素并将其附加到元素来添加元素。

link: function (scope, element, attrs, ctrl) {
                    var tpl = <button ng-click="someAction()" ng-class="{\'success\': isSuccess()}" ng-disabled="isDisabled()">click me</button>';
                    var el = $compile(tpl)(scope);
                    element.after(el);
...}

如何使用AngularJS指令将按钮添加到输入字段？

1 个答案: