0

我有一个指令，它根据指令值呈现适当的模板。它呈现表单部分。我想收集它们并根据任何变化进行评估。

如果我使用 ng-change w/o 指令，一切似乎都工作正常，但在调用模板并且 ng-change 在模板内部时情况并非如此。

指令看起来更像这样：

myApp.directive('render', function () {
    return function (scope, element, attrs) {
        return attrs.$observe('parameters', function (value) {
            var attributes, options, renderValue;
            attributes = scope.$eval("{" + attrs.parameters + "}");
            renderValue = attrs.render;
            if (renderValue === "input") {
                return {
                    restrict: 'E',
                    replace: true,
                    template: element.html('<label for="' + element.text() + '">' + element.text() + ' </label><input name="' + element.text() + '" type=' + attributes.type + ' class="large-12 columns" ng-model="' + element.text() + '" ng-change="change()">')
                };
            }
        })
    }

});

如果要渲染选择、收音机等，它还有更多其他功能。但想法是一样的。

这是显示我的问题的jsfiddle。

我将不胜感激。

编辑

jsfiddle 上的错误粘贴，现已更正。

4

1 回答 1

1

嗯，您如何看待可与 ngRepeat 一起重用的通用实现？

http://jsfiddle.net/y3hUf/2/

var app = angular.module("app", []);
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
            };
        }
    };
});

学分：http ://tech.pro/q/22/how-to-create-reusable-angularjs-directives-that-c​​opy-existing-directives

希望能帮助到你 ;） ！

于 2013-09-21T18:13:35.787 回答