如何在angular中设置插件内部指令?

时间:2015-01-28 15:00:58

标签: angularjs angularjs-directive

我有指令要检查我的手机是横向还是纵向。我想使用插件matchmedia。如何在指令内设置它?

这是我的代码:

.directive('resizeMobile', function ($window) {
        return {
            controller:'MainController',
            link:function($scope, element, attrs,ctrl) {
                console.log(ctrl.landscape);
                var w = angular.element($window);
                $scope.getWindowDimensions = function () {
                    return {
                        'h': w.height(),
                        'w': w.width()
                    };
                };
                $scope.$watch($scope.getWindowDimensions, function (newValue, oldValue) {
                    $scope.windowHeight = newValue.h;
                    $scope.windowWidth = newValue.w;
                }, true);

                w.bind('resize', function () {
                    $scope.$apply();
                });
            }

        }
    });

myApp.controller('MainController', ['$scope', '$window','matchmedia','$http',
    function($scope, $window, matchmedia,$http) {
         this.landscape = matchmedia.isLandscape();
}]);

感谢您的回答

1 个答案:

答案 0 :(得分:0)

所有交易都是在指令的回调函数中添加插件作为参数。例如在我的情况下是 enter code here。指令(' resizeMobile',function($ window,matchmedia){ 之后,将所需参数添加到$ watch

myApp
    .directive('resize', function ($window,$http,matchmedia) {

        return function ($scope, element) {

            console.log(element);
            var w = angular.element($window);
            //var a=matchmedia.isPhone();
            //alert(a);
            $scope.getWindowDimensions = function () {
                return {
                    'h': w.height(),
                    'w': w.width(),
                    'o': matchmedia.isLandscape()
                };
            };
            $scope.$watch($scope.getWindowDimensions, function (newValue, oldValue) {
                $scope.windowHeight = newValue.h;
                $scope.windowWidth = newValue.w;
                $scope.orientation = newValue.o;
            }, true);

            w.bind('resize', function () {
                $scope.$apply();
            });
        }
    })