Question

http://plnkr.co/edit/C4mFd5MOLBD2wfm8bMhJ?p=preview

让我们举一个简单的例子说你想要显示一个cookie的价值，无论它是什么，但这可能是一个客户名称或任何你想要的。似乎有很多选择：指令，服务，带服务的指令，控制器 - 无论我查看了多少文档或我读过的博客文章，我仍然有一些关于访问数据然后更新数据的适当方式的基本问题。相应的范围。

我现在想到的是，对于非NgModelController能力的DOM元素（例如span或div）或者除用户输入之外的任何东西，似乎没有相当于ngModel的事实。基本上，看看如何在指令的链接功能中使用ngModelCtrl似乎很有意义，它不允许你淹没在范围汤中它很好地组织你的想法，但我们如何实现这一点与ngBind元素解耦？

我认为答案只是'使用服务'，但也许并非在所有情况下都是啃着我的东西。假设您想要显示一个非常特定的cookie（或客户名称）并且您不知道要在哪里显示它，那么可以不断地将自定义CookieService注入其中，但是清除事物的具体指令：<specific-cookie></specific-cookie>我们只需将CookieService注入该指令，或者只是通过$cookies访问它，就像我们在其他地方所做的那样。

答案是否仅取决于您将来是否会访问多个Cookie？也就是说，如果你只需要一个<specific-cookie></specific-cookie>，那么只需在你的指令中使用$cookies并继续你的生活，或者将这种类型的调用抽象为服务总是合适的，或者我只是在理解这一点时非常迂腐。

指令

角myapp.js

var app = angular.module('myApp', ['ngCookies']);

app.directive('cookie', ['$cookies', function($cookies) {
  return {
    scope: true,
    controller: function($scope, $element, $attrs) {
      $scope.cookie = $cookies[$attrs.cookie];
    }
  }
}]);

的index.html

<div cookie="__utma">Cookie: {{cookie}}</div>

控制器

角myapp.js

app.controller('CookieCtrl', function($attrs, $cookies) {
  this.value = $cookies[$attrs['getcookie']];
});

的index.html

<a ng-controller="CookieCtrl as cookie" getCookie="__utma" href="/{{cookie.value}}">{{cookie.value}}</a>

服务

角myapp.js

app.controller('SomeCtrl', function($scope, CookieService) {
  $scope.cookie = CookieService.getCookie('__utma');
});

app.service('CookieService', function($cookies) {
  var getCookie = function(cookie) {
    return $cookies[cookie];
  };
  return ({ getCookie: getCookie });
});

的index.html

<div ng-controller="SomeCtrl">Cookie: {{cookie}}</div>

服务指令

角myapp.js

app.directive('specificCookie', function(CookieService) {
  return {
    scope: true,
    template: 'Cookie: <span ng-bind="cookie"></span>',
    controller: function($scope, $element, $attrs) {
      $scope.cookie = CookieService.getCookie('__utma');
    }
  }
});

的index.html

<specific-cookie></specific-cookie>

Answer 1

除非我误解你的某些场景，否则最简单（也是正确）的方法是创建一个可重用的指令，该指令根据通过其属性传递给它的名称显示cookie。

app.directive('cookie', ['$cookies', function($cookies) {
  return {
    scope: {},
    template: "<span>{{cookie}}</span>",
    restrict: "E",
    link: function(scope, element, attrs) {
      attrs.$observe("name", function(newVal){
        scope.cookie = $cookies[newVal];
      });
    }
  };
}]);

用法很简单（和页面控制器无关）：

<cookie name="__utma"></cookie>

<input ng-model="cookieName" type="text">
<cookie name="{{cookieName}}"></cookie>

生成的DOM将是：

<span class="ng-binding">137862001.838693016.141754...</span>
<span class="ng-binding">GA1.2.838693016.1417544553</span>

ng Bind相当于NgModelController（或最佳实践）

指令

控制器

服务

服务指令

1 个答案: