Question

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

javascript代码如下所示：/chrome/i.test( navigator.userAgent )，但放置它的最佳位置在哪里？在过滤器？在控制器？在指令中？

Answer 1

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

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

以下是过滤器示例代码：

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

    return function(){

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

模板代码：

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

Answer 2

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

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>