在控制器

Question

我有一个旋转木马，可以从数组中加载一堆项目，但是正在使用一个指令来显示旋转木马。

如果选择了某些内容，我想从列表中删除项目，例如“街头派对”，但是由于项目列表似乎绑定到指令，如何重新加载指令？我见过类似的问题，但我似乎无法继续工作......谢谢。

在我的控制器中，我有各种各样的项目

this.eventProducts.push({
                link: "/quote/bar-and-bat-mitzvah-insurance",
                image: "/Content/Images/policies/bar-mitzvah.jpg",
                name: "Bar and Bat Mitzvahs"
            });
            this.eventProducts.push({
                link: "/quote/street-party-insurance",
                image: "/Content/Images/policies/street-party.jpg",
                name: "Street Parties"
            });
            this.eventProducts.push({
                link: "/quote/conference-and-meetings-insurance",
                image: "/Content/Images/policies/conference.jpg",
                name: "Conferences and Meetings"
            });

然后我有这个设置轮播的指令

angular.module("App")
        .controller("HomepageController", HomepageController)
        .config(["$routeProvider", HomepageController.routing])
        .directive("owlCarousel", () => {
            return {
                restrict: "E",
                transclude: false,
                link: (scope:any) => {
                    scope.initCarousel = (element) => {
                        // provide any default options you want
                        var defaultOptions = {
                        };
                        var customOptions = scope.$eval($(element).attr("data-options"));
                        // combine the two options objects
                        for (var key in customOptions) {
                            defaultOptions[key] = customOptions[key];
                        }
                        // init carousel
                        (<any>$(element)).owlCarousel(defaultOptions);
                    };
                }
            };
        })
        .directive("owlCarouselItem", [() => {
            return {
                restrict: "A",
                transclude: false,
                link:  (scope, element) => {
                    // wait for the last item in the ng-repeat then call init
                    if (scope.$last) {
                        scope.initCarousel(element.parent());
                    }
                }
            };
        }]);

在HTML中，项目正在加载

<div class="row homepage-events">
    <div class="homepage-heading"><h2 class="text-center">A Selection of our Most Popular Event Insurance Policies</h2></div>
    <data-owl-carousel class="owl-carousel" data-options="{navigation: false, pagination: true, rewindNav : true}">
        <div class="carousel-item" owl-carousel-item="" data-ng-repeat="product in ::homepageController.eventProducts">
            <div class="">
                <div class="thumbnails thumbnail-style thumbnail-kenburn">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">
                            <a class="" href="{{::product.link}}">
                                <img data-ng-src="{{::product.image}}" alt="{{::product.altText}}" />
                            </a>
                        </div>
                        <a class="btn-more2 hover-effect">Insurance for</a>
                        <a class="btn-more hover-effect" data-ng-href="{{::product.link}}">{{::product.name}}</a>
                    </div>
                </div>
            </div>
        </div>
    </data-owl-carousel>
</div>