0

我有个问题。我在浏览器中创建了 3 个图块，当我关闭图块时，它必须消失并在其中出现新的图块。

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

当我单击第一个图块时，关闭的 lict 向右移动，新的图块出现在这个地方时，旧图块（这是我的应用程序中的大错误）并单击其他图块什么也不做。

现在我在浏览器代码和控制台中调试有很好的数据（在函数关闭磁贴中）但是角度做错了或者我。所以在这个函数中当我关闭磁贴时，我将它从对象列表中删除并添加到这个地方新新瓷砖的属性（来自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>

我在等待帮助:)

4

1 回答 1

0

修复此错误：

在指令链接器中：

var linker = function (scope, element, attrs) {
    var loader = getTemplate(scope.content.Type);
    loader.success(function (html) {

        element.html(html);
        $compile(element.contents())(scope);
    });
于 2013-08-20T13:05:37.750 回答