使用 AngularJS 中的指令更改 "more then one" 的 templateUrl

Question

我一直在寻找一种方法来将 templateUrl 更改为调整大小事件。我在 link:

中找到了答案

Change the templateUrl of directive based on screen resolution AngularJS

张先生发布"Dfsq"。它运行良好，直到我需要同时在两个不同的 templatesUrls 中执行相同的过程。不工作。当我删除一个指令时，另一个指令开始工作。

知道我哪里错了。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

angular.module('plunker')
  .directive('browseContent', 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 = 'browse-content-mobile.html';
                } else if (screenWidth >= 768) {
                    scope.templateUrl = 'browse-content.html';
                }
            }
        }
    }
})
  .directive('segundoContent', function($window) {
    return {
        restrict: 'E',
        template: '<div ng-include="templateUrl2"></div>',
        link: function(scope) {
            
            $window.onresize = function() {
                changeTemplate2();
                scope.$apply();
            };
            changeTemplate2();
            
            function changeTemplate2() {
                var screenWidth = $window.innerWidth;
                if (screenWidth < 768) {
                    scope.templateUrl2 = 'segundoContent.html';
                } else if (screenWidth >= 768) {
                    scope.templateUrl2 = 'segundoContent-mobile.html';
                }
            }
        }
    }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    <browse-content></browse-content>
    <segundo-content></segundo-content>
</body>

</html>

感谢您的帮助

Answer 1

目前您正在使用 onresize 方法，该方法可能会在 window 的大小调整时注册单个事件，因此当您在 DOM 中使用第二个指令时，它会在调整大小时注册最新的函数.

理想情况下，您应该使用 resize 和 handler 函数，这样多个事件将同时注册。

browseContent 指令

var w = angular.element($window);
w.on('resize', function(e) {
    changeTemplate();
    scope.$apply();
});

segundoContent 指令

var w = angular.element($window)
w.on('resize', function() {
    changeTemplate2();
    scope.$apply();
});

Demo Plunkr

更方便的方法是只使用一个指令并将 templateUrl 函数/templateUrl 本身传递给它，这样该指令将变得更加通用并且您不需要一次创建两个指令。

HTML

<body ng-controller="MainCtrl">
    <browse-content templates="htmls"></browse-content>
    <browse-content templates="segundo"></segundo-content>
</body>

代码

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.htmls = ['browse-content-mobile.html', 'browse-content.html'];
  $scope.segundo = ['segundoContent.html', 'segundoContent-mobile.html'];
});

angular.module('plunker')
  .directive('browseContent', function($window) {
    return {
      restrict: 'E',
      template: '<div ng-include="templateUrl"></div>',
      link: function(scope, element, attrs) {
        var w = angular.element($window);
        w.on('resize', function(e) {
          changeTemplate();
          scope.$apply();
        });
        var templates = scope.$eval(attrs.templates);
        console.log(templates)
        changeTemplate();

        function changeTemplate() {
          var screenWidth = $window.innerWidth;
          if (screenWidth < 768) {
            scope.templateUrl = templates[0];
          } else if (screenWidth >= 768) {
            scope.templateUrl = templates[1];
          }
        }
      }
    }
});

Better Approach

使用 AngularJS 中的指令更改 "more then one" 的 templateUrl

Change the templateUrl of "more then one" with directives in AngularJS

window-resize

angularjs

angularjs-directive