"more then one"のtemplateUrlをAngularJSのディレクティブで変更します

私はresizeイベントとしてtemplateUrlを変更する方法を探していました。"more then one"のtemplateUrlをAngularJSのディレクティブで変更します

Change the templateUrl of directive based on screen resolution AngularJS

MR投稿者：私はリンクで答えを見つけました。 "Dfsq"。これは、同じプロセスを2つの異なるテンプレート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>

私は

出典

2016-07-14 Lovera

現在あなたが潜在的にウィンドウのサイズ変更に単一のイベントを登録しますonresize方法を使用しているので、あなたはDOMで第二のディレクティブを持っているときの助けに感謝サイズ変更の最新機能を登録しています。

resizeとhandlerのfunctoinを使用するのが理想的です。複数のイベントが同時に登録されるようにしてください。もっと便利な方法がJだろう

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自身をそれに渡すと、ディレクティブはより一般的になります&一度に2つのディレクティブを作成する必要はありません。

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のディレクティブで変更します

答えて

関連する問題