javascript - ngBind 相当于 NgModelController(或最佳实践)

Question

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

让我们举一个简单的例子，假设您想显示 cookie 的值，而不管它是什么，但这可以是客户名称或您想要的任何内容。似乎有太多可用的选项:指令、服务、带服务的指令、 Controller ——无论我查看了多少文档或阅读了多少博客文章，我仍然对访问数据的适当方式然后更新相应的范围。

现在让我的想法蒙上阴影的是，似乎没有 NgModelController 的等价物。对于非 ngModel有能力的 DOM 元素，如 span 或 div 或除用户输入之外的任何东西。基本上，看看如何 ngModelCtrl在指令的链接功能中使用 似乎很有意义，它不会让您淹没在作用域汤中并且很好地组织您的想法，但是我们如何实现与 ngBind 元素的这种解耦？

我认为答案只是“使用服务”，但也许并非在所有情况下都是困扰我的问题。假设您想要显示一个非常具体的 cookie(或客户名称)并且您不知道要在哪里显示它，您可以无论走到哪里都不断地注入(inject)您的自定义 CookieService，但是呢？清理事物的特定指令:<specific-cookie></specific-cookie>我们是将我们的 CookieService 注入(inject)该指令，还是仅通过 $cookies 访问它？就像我们在其他地方所做的那样。

答案是否仅仅取决于您将来是否会访问多个 cookie？也就是说，如果您只需要一个 <specific-cookie></specific-cookie> ，然后只需使用 $cookies在你的指导下继续你的生活，或者将这种类型的调用抽象到服务中总是合适的，或者我只是在理解这一点上太迂腐了。

指令

angular-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>

Controller

angular-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>

服务

angular-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>

服务指令

angular-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];
      });
    }
  };
}]);

用法很简单(并且独立于页面 Controller ):

<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>