Question

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

如果我使用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()">')
                };
            }
        })
    }

});

如果要渲染选择，无线电等等，还有其他一些功能。但这个想法是一样的。

Here is the jsfiddle which shows my problem.

我将不胜感激任何帮助。

修改

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

Answer 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-copy-existing-directives

希望它有所帮助;）！

angularjs模板ng-change未调用

1 个答案: