"more then one"의 templateUrl을 AngularJS의 지시어로 변경하십시오.

저는 resize 이벤트로 templateUrl을 변경하는 방법을 찾고있었습니다."more then one"의 templateUrl을 AngularJS의 지시어로 변경하십시오.

Change the templateUrl of directive based on screen resolution AngularJS

씨에 의해 게시 됨 : 나는 링크에서 답을 찾아 냈다. "Dfsq". 같은 시간에 두 개의 서로 다른 템플릿 URL에서 동일한 작업을 수행해야 할 때까지 제대로 작동했습니다. 작동하지 않았다. 지시문을 삭제하면 다른 지시문이 삭제됩니다.

내가 잘못된 부분이 있습니다.

플 렁커가 뒤 따른다.

Plunker Example Here!

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="[email protected]" 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>

나는 그래서 당신은 DOM에서 2 지시가있는 경우, 현재

출처

2016-07-14 Lovera

잠재적으로 창의 크기 조정에 하나의 이벤트를 등록합니다 onresize 방법을 사용하고있는 도움을 주셔서 감사합니다 그것은 크기 조정에 최신 기능을 등록.

resize을 handler functoin으로 사용하는 것이 이상적이므로 여러 이벤트가 동시에 등록됩니다.

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

더 편리한 방법은 J 될 것 하나의 지시문을 사용하고 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

출처

2016-07-14 19:28:29

추가에게 방법. 둘 다 작동을 멈췄다. 추가 할 장소는 무엇입니까? 도움 주셔서 감사합니다. sr. Pankaj – Lovera

의사 소통을하는 동안 영어로 할 수 있겠습니까? –

@ user3403205 업데이트 된 코드 및 plunkr도 확인하십시오. Thanks :) –

"more then one"의 templateUrl을 AngularJS의 지시어로 변경하십시오.

답변

관련 문제