angularjs 为什么ng-repeat在自定义指令中不起作用？

efzxgjgh 于 2023-02-03 发布在 Angular

关注(0)|答案(1)|浏览(113)

我是AngularJS的新手，当ng-repeat嵌入到如下指令中时，我无法使其工作

<settings-widget>
    <ul class="ul-border">
     <li class="box" ng-repeat="item in list">{{item}}</li>
    </ul>
</settings-widget>

app.directive("settingsWidget", function ($compile, $timeout) {
    return {
        restrict: "E",
        replace: "true",
        scope: { },
        transclude: true,
        templateUrl: "/Settings.html",
        compile: function (element, attrs, transclude) {
            return function (scope) {
                transclude(scope, function (clone) {
                    var html = angular.element("<div>").append(clone).html();
                    scope.template = html;
                });
            };
        },
        controller: ['$scope', '$element', '$attrs', '$rootScope', function ($scope, $element, $attrs, $rootScope) {
            $scope.list = ['item1', 'item2'];
        }]
    };
});

Settings.html

<div>
        <form id="settingsForm" name="settingsForm" novalidate ng-submit="save(settingsForm)" ng-model-options="{ allowInvalid: true}">
            <div compile="{{template}}"></div>
        </form>
</div>

由于某种原因，当我运行我的应用程序<li>标签没有被创建。
有人能帮帮我吗？

angularjs

来源：https://stackoverflow.com/questions/75156716/why-is-ng-repeat-not-working-in-custom-directive

1条答案

按热度按时间

kmynzznz1#

**1.普通转换（传递的html使用父作用域）：**在父控制器中定义list！

<settings-widget>
    <ul class="ul-border">
     <li class="box" ng-repeat="item in list">{{item}}</li>
    </ul>
</settings-widget>

app.directive("settingsWidget", function () {
    return {
        restrict: "E",
        replace: "true",
        scope: { },
        transclude: true,
        templateUrl: "/Settings.html"
    }
});

<div>
        <form id="settingsForm" name="settingsForm" novalidate ng-submit="save(settingsForm)" ng-model-options="{ allowInvalid: true}">
            <ng-transclude></ng-transclude>
        </form>
</div>

2.无转换（传递的html使用指令作用域）：

<settings-widget additional-tpl="'myTemplate'">
</settings-widget>
<script type="text/ng-template" id="myTemplate">
    <ul class="ul-border">
     <li class="box" ng-repeat="item in list">{{item}}</li>
    </ul>
</script>

app.directive("settingsWidget", function () {
    return {
        restrict: "E",
        scope: { 
          additionalTpl: '<'
        },
        templateUrl: "./settings.html",
        controller: ['$scope', function ($scope) {
            $scope.list = ['item1', 'item2'];
        }]
    };
});

<div>
        <form id="settingsForm" name="settingsForm" novalidate ng-submit="save(settingsForm)" ng-model-options="{ allowInvalid: true}">
            <div ng-include="additionalTpl">
            </div>
        </form>
</div>

**2. Transclution+（传递的html要同时使用指令和父作用域）：**这个看起来很棘手，我实际上从来没有这样做过，我想很简单的方法是使用$parent ref，因为你没有这个compile手动调用：

<settings-widget>
    <div>By default I take value from parent scope {{parentCtrlValue}} 
    </div>
    <ul class="ul-border">
       <li class="box" ng-repeat="item in $parent.list">{{item}}</li>
    </ul>
</settings-widget>

app.directive("settingsWidget", function () {
    return {
        restrict: "E",
        scope: { },
        transclude: true,
        templateUrl: "./settings.html",
        controller: ['$scope', function ($scope) {
            $scope.list = ['item1', 'item2'];
        }]
    };
});

<div>
    <form id="settingsForm" name="settingsForm" novalidate ng-submit="save(settingsForm)" ng-model-options="{ allowInvalid: true}">
        <ng-transclude></ng-transclude>
    </form>
</div>

赞(0）回复(0）举报 2023-02-03

我来回答

angularjs 为什么ng-repeat在自定义指令中不起作用？

1条答案

相关问题

热门标签

最新问答