javascript - AngularJS - ngRepeat ディレクティブ AngularJS でタイルを閉じてモデルから新しいビューをロードする

Question

私は問題があります。ブラウザで 3 つのタイルを作成し、タイルを閉じると消えて、その場所に新しいタイルが表示される必要があります。

右上には、タイルを閉じる必要があるクロスがあります。

最初のタイルをクリックすると、lict が閉じて右に移動し、古いタイルがあったときにこの場所に新しいものが表示され (これは私のアプリの大きなバグです)、他のタイルをクリックしても何もしません。

そして今、私はブラウザコードでデバッグし、コンソールには良いデータがあります(関数クローズタイル内)が、Angularが何か間違っているか、おそらく私です。したがって、この関数では、タイルを閉じるときにオブジェクトのリストから削除し、この場所に新しいものを追加しますプロパティを新しいタイルに (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>

私は助けを待っています:)