AngularJS-关闭tile并从ngRepeat指令AngularJS中的模型加载新视图

我有个问题。我在浏览器中创建了一个3个互动程序，当我关闭互动程序时，它必须消失，并在其中显示新的互动程序。

所以在右上角我有一个十字架，它必须关闭瓷砖。

当我点击第一个磁贴时，关闭的磁贴向右移动，新的磁贴出现在这个地方，而旧的磁贴（这是我应用程序中的一个大错误），点击其他磁贴什么都不做。

现在，我在浏览器代码和控制台中进行了去bug处理，有很好的数据（在函数关闭tile中），但angular做了一些错误的事情，或者可能是我。所以在这个函数中，当我关闭tile时，我将其从对象列表中删除，并在这个位置向新tile添加新属性（从restSlide）。

这是我的指示：

dModule.directive('activeMetro', ['$compile', '$http', '$templateCache', function ($compile, $http, $templateCache) {
var getTemplate = function (contentType) {
    var templateLoader,
        baseUrl = 'partials/tiles/',
        templateMap = {
            Club: 'club.html',
            Festival: 'festival.html',
            Theater: 'theater.html',
            Audition: 'tv.html',
            Seance: 'cinema.html',
            Sport: 'sport.html'
        };
    var templateUrl = baseUrl + templateMap[contentType];
    templateLoader = $http.get(templateUrl, { cache: $templateCache });
    return templateLoader;
};
var linker = function (scope, element, attrs) {
    var loader = getTemplate(scope.content.Type);
    var promise = loader.success(function (html) {
        element.html(html);
    }).then(function (response) {
        element.replaceWith($compile(element.html())(scope));
    });
};
return {
    restrict: 'E',
    transclude: 'true',
    scope: {
        content: '=content',
        globalFoo: '=globalFoo',
        additional: '=additional',
    },
    controller: ['$scope', '$element', '$attrs', '$transclude', '$rootScope', function ($scope, $element, $attrs, $transclude, $rootScope) {
        $scope.removeFromSlide = function (id) {

            if ($rootScope.additional.length > 1) {

                var slides = $rootScope.content;
                var restSlide = $rootScope.additional;
                var numSlide = $rootScope.slideNumber;
                var onSlide = $rootScope.activitiesOnSlideNumber;
                for (var i = 0; i < numSlide; i++) {
                    for (var j = 0; j < onSlide; j++) {
                        if (slides[i][j].Id == id) {
                            slides[i].splice(j, 1, restSlide[0]);
                            console.log(restSlide[0]);
                            restSlide.splice(0, 1);
                        }
                    }
                }
                $rootScope.content = slides;
                $rootScope.additional = restSlide;
            }

        };
    }],
    link: linker
}; }]);

removeFromSlide是关闭我的互动程序的函数。

现在我有一个页面result.html:

<div class="switch-tile-wrapper">
<div class="switch-tile" id="switch-tile">
    <active-metro  ng-repeat="item in content[0]" content="item" global-foo="globalFoo" additional="additional"></active-metro>
    </div> </div>

代码包含所有类型的瓦片（这是从区分瓦片类型的指令加载的模板）。所有类型的瓦片中都有相同的代码，即

    <div class="tile yellow-tile" id ="{{content.Id}}">
   <div class="activity-type">
          <span ng-click="removeFromSlide(content.Id)">X</span>
        {{content.Type}}{{content.Id}}  
    </div>
    <h4>{{content.Title}}</h4>
    <div class="activity-info">
        <p>G: {{content.G}}</p>
        <p>R: {{content.R}}</p>
        <p>Y: {{content.P}}</p>
        <p>K : {{content.Pr}}</p>
    </div>
    <div class="activity-description">
        <p>{{content.Description}}</p> 
    </div>
</div>

我正在等待帮助：）