Question

我正在通过从云中重复重复JSON文件来创建帖子。我试图通过使用角度指令来使帖子响应，该指令使用屏幕大小更新模板URL。

问题当我调整页面大小时，只有ng-repeat中的最后一个帖子响应并更改模板（有或没有反向过滤器）。其他帖子只是最初加载时的模板。

这是页面中的ng-repeat

<div ng-show="post_loaded" ng-repeat="post in posts | reverse | filter:searchText ">
    <feed-post>
    </feed-post>
</div>

这是指令javascript文件

app.directive('feedPost', function ($window) {
return {
    restrict: 'E',
    template: '<div ng-include="templateUrl"></div>',
    link: function(scope) {

        $window.onresize = function() {
            changeTemplate();
            scope.$apply();
        };
        changeTemplate();

        function changeTemplate() {
            var screenWidth = $window.innerWidth;
            if (screenWidth < 768) {
                scope.templateUrl = 'directives/post_mobile.html';
            } else if (screenWidth >= 768) {
                scope.templateUrl = 'directives/post_desktop.html';
            }
        }
    }
};});

Answer 1

这是因为您在每个指令中重新分配.onresize并且它仅对最后一个链接指令保持有效。

我建议以更有棱角的方式使用它。您实际上并不需要自定义指令

在管理帖子列表的控制器中，添加对$window

中$scope的引用

$scope.window = $window;

然后在模板中使用它

<div ng-include="directives/post_mobile.html" ng-if="window.innerWidth < 768"></div>
<div ng-include="directives/post_desktop.html" ng-if="window.innerWidth >= 768"></div>

为避免帖子Feed的额外包装，您可能需要使用ng-repeat-start, ng-repeat-end directives

Answer 2

这是我根据bootstrap大小和ngIf指令编写的指令：

mainApp.directive("responsive", function($window, $animate) {
    return {
        restrict: "A",
        transclude: 'element',
        terminal: true,
        link: function($scope, $element, $attr, ctrl, $transclude) {
            //var val = $attr["responsive"];
            var block, childScope;

            $scope.$watch(function(){ return $window.innerWidth; }, function (width) {

                if (width < 768) {
                    var s = "xs";
                } else if (width < 992) {
                    var s = "sm";
                } else if (width < 1200) {
                    var s = "md";
                } else {
                    var s = "lg";
                }
                console.log("responsive ok?", $attr.responsive == s);


              if ($attr.responsive == s) {
                if (!childScope) {
                  $transclude(function(clone, newScope) {
                    childScope = newScope;
                    clone[clone.length++] = document.createComment(' end responsive: ' + $attr.responsive + ' ');
                    block = {
                      clone: clone
                    };
                    $animate.enter(clone, $element.parent(), $element);
                  });
                }
              } else {
                if (childScope) {
                  childScope.$destroy();
                  childScope = null;
                }
                if (block) {
                    block.clone.remove();
                    block.clone = null;
                    block = null;
                }
              }
            });


        }
    };
});

Angularjs响应指令实时更新问题（可能是因为重复指令）

2 个答案: