Question

我想在计数器中添加＆＃39; ng-repeat =＆＃34; n＆＃34;＆＃39;到'＃形式＆＃39;在我的指令中标记。我该怎么做呢？我尝试通过编译访问元素，但tElement.find（＆＃39; form＆＃39;）不起作用。

我尝试了所有这些变化：

        console.log(tElement.find('form')); // fails
        console.log(tElement[0].querySelector('form')); // null
        console.log(document.querySelector('form')); // fails

Answer 1

你真的需要指令的用户定义添加按钮吗？因为如果你不能做this。

<script id="repeatableForm.html" type="text/ng-template">
    <input type="button" value="add" ng-click="add()">
    <div ng-repeat="c in counter">
        <div ng-transclude></div>
    </div>
</script>

<强>更新

经过一些工作后，我得到的东西允许用户为添加按钮提供自己的标记。它有点复杂，涉及嵌套指令。有几点值得了解：

repeatableForm指令没有孤立的范围。它通过添加/覆盖repeatableForm属性来修改主机范围。这意味着多个此类指令无法在同一主机范围内执行。
repeatableForm将其控制器作为repeatableForm属性在其主机范围内发布。这比直接在作用域中发布控制器的方法更好，因为它命名这些方法并使主机范围更清晰。

视图

<repeatable-form>
    <input type="button" value="add" ng-click="repeatableForm.add()"/>
    <form action="">
        First Name: <input name="fname" type="text" />
        Last Name: <input name="lname" type="text" />
        <input type="checkbox" name="food" value="Steak"/> Steak
        <input type="checkbox" name="food" value="Egg"/> Egg
        <input type="button" value="remove" ng-click="repeatableForm.remove($index)" />
    </form>
</repeatable-form>

指令

app.directive('repeatableForm', function () {
    return {
        templateUrl:'repeatableForm.html',
        restrict: 'E',
        transclude: true,
        controller: function () {
            var repeatableForm = this
            repeatableForm.add = function () {
                repeatableForm.forms.push(repeatableForm.forms.length + 1);
            };
            repeatableForm.remove = function (index) {
                repeatableForm.forms.splice(index, 1);                 
            };
            repeatableForm.forms = [1, 2, 3];
        },
        controllerAs: 'repeatableForm',
    };
});

app.directive('form', function () {
    return {
        templateUrl: 'repeatedForm.html',
        restrict: 'E',
        transclude: true,
    };
})

模板

<script id="repeatableForm.html" type="text/ng-template">
    <div ng-transclude></div>
</script>
<script id="repeatedForm.html" type="text/ng-template">
    <div ng-repeat="form in repeatableForm.forms"><div ng-transclude></div></div>
</script>

选中demo。

如何动态地将ng-repeat添加到angular指令中的元素？

1 个答案: