Angular - 这需要指令吗？

Question

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

我需要的是告诉应用程序，当用户单击产品的详细信息视图时，是呈现新选项卡还是呈现新选项卡 window。

我的问题是这是否属于指令？如果是这样，你能给我大致描述一下它是如何流动的吗？

我包括下面的代码。如果您需要更多 code/info 来帮助回答问题，请告诉我。

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 演示了 window 大小检测并打开 link 取决于它是移动大小还是桌面大小（大小是任意的，可以设置为任何你想要的)

Plunker Demo

该代码包含一个检测 window 大小的简单函数：

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

然后你附加到你的函数 ng-click 打开 link:

$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 属性，您就会将其留给浏览器来决定是否打开一个新的 window 或选项卡。在现代浏览器中，我认为默认值通常是一个新选项卡。在移动设备上，显然它将成为一个新标签。

但是，如果我们提供用于创建新 window 的参数，它将创建新的 window。 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 - 这需要指令吗？

Angular - Does this require a directive?

mobile

desktop

directive

angularjs

angularjs-ng-click