9

ディレクティブ内にng-modelを使用して入力要素を追加しようとしています。

私のコード

私のディレクティブのリンク関数：

link: function (scope, element, attrs) {
        var elem_0 = angular.element(element.children()[0]);
        for (var i in scope.animals[0]) {
            elem_0.append(angular.element('<span>' + scope.animals[0][i].id + '</span>'));

            //this part doesn't work
            var a_input = angular.element('<input type="text">');
            a_input.attr('ng-model', 'animals[0][' + i + '].name');
            //end
            elem_0.append(a_input);
        }

最後に$compile（）を呼び出す必要があるようですが、方法がわかりません。

4

2 に答える 2

12

試す

var a_input = angular.element($compile('<input type="text" ng-model="animals[0][' + i + '].name"/>')($scope))
elem_0.append(a_input);
于 2013-03-26T09:49:26.013 に答える
5

ng-repeatディレクティブテンプレートでネストされたものを使用して、angularに配列ループを実行させることができる場合は、配列を手動でループすることにより、ディレクティブを必要以上に複雑にします。

angular.module("myApp", [])
    .directive("myDirective", function () {
    return {
        restrict: 'EA',       
        replace: true,
        scope: {
            animals: '=animals'
        },
        template: '<div ng-repeat="group in animals">'+
                       '<span ng-repeat="animal in group">{{animal.id}}'+
                             '<input type="text" ng-model="animal.name"/>'+
                        '</span><hr>'+
                   '</div>'

    }
});

デモ：http：//jsfiddle.net/Ajsy7/2/

于 2013-03-26T11:51:38.047 に答える