Question

我正在为产品查询编写一个简单的UI。加载时，页面会显示RESTful API调用中的产品列表。它使用ng-repeat来装饰数据并将其呈现在列表中。在渲染时，应用程序会检查移动设备。要求是，如果用户在桌面上，它将在新窗口中打开。如果是移动，新标签。（请不要讨论新窗口的优点。这是不可协商的。）

当用户点击产品以获取详细信息视图时，无论是呈现新标签页还是新窗口，我需要告诉应用程序。

我的问题是这是否属于指令？如果是这样，你能粗略地向我描述一下会如何流动吗？

我包括以下代码。如果您需要更多代码/信息来帮助回答问题，请与我们联系。

HTML

<section>
  <div class="headerWrap box-shadow">
    <h2 class="box-shadow">Product Selection</h2>
  </div>
  <ul class="products">
    <li ng-repeat="product in products" class="productPane box-shadow">
        <a ng-show="isMobile" ng-href="#/products/{{product.product_id}}" ng-click="getProduct('mobile')">
            <div class="productMeta box-shadow">
                <img ng-src="{{product.image}}">
                <h3>{{product.name}}</h3>
                <p>{{(product.price/100) | currency: "&euro;" : 2}}</p>
            </div>
        </a>
        <a ng-show="!isMobile" ng-click="getProduct('notMobile')">
            <div class="productMeta box-shadow">
                <img ng-src="{{product.image}}">
                <h3>{{product.name}}</h3>
                <p>{{(product.price/100) | currency: "&euro;" : 2}}</p>
            </div>
        </a>
    </li>
  </ul>
</section>

控制器

var DemoControllers = angular.module('DemoControllers', []);

DemoControllers.controller('ProductListCtrl', ['$scope', '$http', 'list',
function ($scope, $http, list) {
    list.getList().success(function (data, status, headers, config) {
        $scope.products = data.products;
    });
}]);

DemoControllers.controller('ProductDetailCtrl', ['$scope', '$http', '$routeParams', 'product',
function ($scope, $http, $routeParams, product) {
    $scope.product_id = $routeParams.product_id;
    product.getProduct().success(function (data, status, headers, config) {
        $scope.selected = data; 
    };
}]);

服务

var DemoServices = angular.module('DemoServices', []);

DemoServices.factory('list', ['$http', function ($http) {
  return {
    getList: function () {
        return $http.get('https://s3-eu-west-1.amazonaws.com/developer-application-test/cart/list');
    }
  }
}]);

DemoServices.factory('product', ['$http', function ($http, id) {
  return {
    getProduct: function ($http, id) {
        return $http.get('https://s3-eu-west-1.amazonaws.com/developer-application-test/cart/' + id + '/detail');
    }
  }
}]);

Answer 1

我想你可以在一个指令中完成它，但代码很简单，你真的不需要重复它，所以我不确定它是否有任何区别。

我在这里找到了一些有用的东西： Detecting a mobile browser

这是一个展示窗口尺寸检测并打开链接的plunker，具体取决于它是移动尺寸还是桌面尺寸（尺寸是任意的，可以设置为你想要的任何颜色）

Plunker Demo

代码由一个检测窗口大小的简单函数组成：

$scope.check = false;
function detectmob() {
 if(window.innerWidth <= 800 && window.innerHeight <= 600) {
   return true;
 } else {
   return false;
 }
}
$scope.check = detectmob();

然后附加到ng-click的功能打开链接：

$scope.openLink = function(link){
  if($scope.check) {
      window.open(link, '_blank');
  } else {
      window.open(link, 'new_window', 'toolbars=0,width=400,height=320,left=200,top=200,scrollbars=1,resizable=1')
  }
}

显然，如果您只设置_blank属性，则将其留给浏览器决定是否打开新窗口或标签。在现代浏览器中，我认为默认通常是新选项卡。在移动设备上，显然它将成为一个新标签。

如果我们提供创建新窗口的参数，它将创建新窗口。 new_window参数只是一个占位符。

修改所以我决定进一步探索这个想法，并且我构建了一个指令，将所有逻辑封装到一个可以附加到按钮的属性中。我必须说，在玩了一下之后，我更喜欢这种方法。

以下是代码：

app.directive('linkOpener', function() { return { restrict: 'A', scope: { theLink: '@' }, link: function(scope, elem, attrs) { var theLink attrs.$observe('theLink', function(value){ return theLink = value; }); var check = false; function detectmob() { if(window.innerWidth <= 800 && window.innerHeight <= 600) { return true; } else { return false; } } check = detectmob(); var openLink = function(){ if(check) { window.open(theLink, '_blank'); } else { window.open(theLink, 'new_window', 'toolbars=0,width=400,height=320,left=200,top=200,scrollbars=1,resizable=1') } } elem.on('click', openLink); } } })

Plunker with controller logic and directive

Angular - 这是否需要指令？

1 个答案: