2

これは私が今していることです:
http://jsbin.com/EDovILI/1/edit

基本的に、イベントリスナーをコントローラーに貼り付けます。それを行う正しい方法のようには感じませんが、これをどのように抽象化できるかはわかりません

テンプレート: 

<div ng-app="app" ng-controller="appController">
    <div ng-if="layout == 'big'>...</div>
    <div ng-if="layout == 'small'>...</div>
</div>

JavaScript:

function gitReposController($scope, github){
    //...
        var widthQuery = window.matchMedia("(min-width: 44.375em)");
        var setSizeAppropriateTemplate = function (mql) {
            if (mql.matches) {
                $scope.layout = 'big';
            } else {
                $scope.layout = 'small';
            }
            if(!$scope.$$phase) { //prevents it from unnecessarily calling $scope.$apply when the page first runs
                $scope.$apply();
            }
        };
        widthQuery.addListener(setSizeAppropriateTemplate);
        setSizeAppropriateTemplate(widthQuery);
    //...
}

編集/補遺:

コントローラーでイベントリスナーを作成するのは悪い形式ですか? 代わりにディレクティブであるべきですか？それとも振る舞い？

edit : それをディレクティブに変更し、今ではもっと理にかなっていると思います。おそらくもっと良いかもしれません。
http://jsbin.com/EDovILI/4/edit

テンプレート: 

<div ng-app="gitRepos" ng-controller="gitReposController" breakpoint="min-width: 44.375em">
    <div ng-if="matches">...</div>
    <div ng-if="!matches'>...</div>
</div>

JavaScript

app.directive("breakpoint", function () {
    return function (scope, element, attrs) {
        var breakpoint = attrs.breakpoint;
        var mql = window.matchMedia( "(" + breakpoint + ")" );
        var mqlHandler = function (mql) {
            scope.matches = mql.matches;
            if(!scope.$$phase) { //prevents it from unnecessarily calling $scope.$apply when the page first runs
                scope.$apply();
            }
        };
        mql.addListener(mqlHandler);
        mqlHandler(mql);
    };
});
4

1 に答える 1

3

この機能を Angular プロジェクトにも追加することに興味があります。両方に役立ついくつかの解決策を見つけました。

私はこれらのアプローチを完全にテストしていないので、「ベストプラクティス」が何であるかはわかりませんが、これらの人たちは私たちと同じ思考プロセスを持っていたようです. お役に立てれば！

于 2014-08-26T00:14:34.100 に答える