javascript - 检测浏览器和显示/隐藏 div 的正确位置

Question

如果用户在某个浏览器（在本例中为 chrome/chormium）中打开页面，我想显示一个 div（使用ng-ifor ng-show/hide），但我不确定哪里是最好的地方。

javascript 代码看起来像这样：/chrome/i.test( navigator.userAgent )，但是最好的放置位置在哪里？在过滤器中？在控制器中？在指令中？

score 3 · Accepted Answer

检查以下详细的浏览器检测脚本

我会建议你使用“指令”或“过滤器”

下面是过滤器示例代码：

angular.module('myApp', []).filter('checkBrowser', function(){

    return function(){

        return /chrome/i.test(navigator.userAgent)
    }
})

模板代码：

<div ng-show="{{''|checkBrowser}}">Hello</div>

score 2 · Accepted Answer

您可以将您的条件分配给控制器内的范围变量：

angular.module('myApp', []).controller('MyCtrl', ['$scope', function( $scope ) {
    $scope.isChrome = /chrome/i.test(navigator.userAgent);
});

然后在你的视野中：

<div data-ng-show="isChrome">You're running Chrome!</div>

如果您需要任何控制器都可以使用的变量，请使用服务：

angular.module('myApp', []).factory('UAService', function() {
    return {
        isChrome: /chrome/i.test(navigator.userAgent)
    };
});

然后从页面级控制器（即分配给顶级元素的控制器，例如<body>）或任何其他控制器，注入您的服务：

angular.module('myApp', []).controller('MyCtrl', ['$scope', 'UAService', function( $scope, UAService ) {
    $scope.UAService = UAService;
});

您的服务现在可以从页面级控制器创建的范围内的任何范围内访问：

<div data-ng-show="UAService.isChrome">You're running Chrome!</div>

2 回答 2