Question

这就是我现在正在做的事情：
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);
    //...
}

编辑/附录：

在控制器中创建事件侦听器是不好的形式？它应该是一个指令吗？或者也许是行为？

编辑：将其修改为指令并认为现在更有意义。虽然可能会更好。
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);
    };
});

Answer 1

我很想知道将这个功能添加到我的Angular项目中，我发现了一些可能对我们两者都有帮助的解决方案：

我还没有彻底测试过这些方法，所以我不确定“最佳实践”是什么，但似乎这些人和我们有着相同的思考过程。希望这有帮助！

“Angular”响应模板的方式？ matchMedia是否进入'控制器'？

1 个答案: