Javascript ngBind相当于NgModelController（或最佳实践）

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

现在让我感到困惑的是，对于非

ngModel

功能的DOM元素，如span或div或除用户输入之外的任何东西，似乎没有与

NgModelController

等价的东西。基本上，看到指令的link函数中如何使用

ngModelCtrl

似乎很有意义，它不允许您淹没在scope汤中，它很好地组织了您的想法，但是我们如何实现与ngBind元素的解耦呢

我认为答案只是“使用服务”，但也许并非所有情况下都是困扰我的问题。假设您想显示一个非常特定的cookie（或客户名称），而您不知道要在哪里显示它，您可以在任何地方不断注入您的自定义CookieService，但是一个特定的指令如何清理呢：

我们是否可以将我们的CookieService注入到该指令中，或者像我们在其他地方做的那样，通过

$cookies

访问它

答案仅仅在于你将来是否会访问多个cookie吗？也就是说，如果你只需要一个

，那么就在你的指令中使用

$cookies

，继续你的生活，或者将这种类型的调用抽象到服务中总是合适的，或者我只是在理解这一点上过于迂腐

指示 angular-myapp.js

index.html

index.html

index.html

Cookie:{{Cookie}

带服务的指令 angular-myapp.js

app.directive（'specificCookie'，函数（CookieService）{
返回{
范围：正确，
模板：“Cookie:”，
控制器：函数（$scope、$element、$attrs）{
$scope.cookie=CookieService.getCookie（“uuuUtMA”）；
}
}
});

index.html

---

除非我误解了您的一些场景，否则最简单（也是正确的）方法是创建一个可重用指令，根据通过属性传递给它的名称显示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];
      });
    }
  };
}]);

app.directive（'cookie'，['$cookies'，函数（$cookies）{
返回{
作用域：{}，
模板：“{cookie}}”，
限制：“E”，
链接：函数（范围、元素、属性）{
属性$observe（“名称”，函数（newVal）{
scope.cookie=$cookies[newVal]；
});
}
};
}]);

这种用法很简单（与页面控制器无关）：

生成的DOM将是：

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

137862001.838693016.141754。。。
GA1.2.838693016.1417544553

我不明白。您是否只需要“删除”一个指令并让它呈现一个cookie值？如果是这样，您可以将

指令与

$cookie

一起使用，甚至可以使用

指令。感谢您的回复。我对$observe方法的理解是，它本质上是为了观察给定属性的插值表达式，但是如果我们传递字符串literal

\uuu utma

，我们真的需要观察吗？此外，考虑到我们最终只是更新范围。为什么选择在这里使用link而不是controller（就像我提出的第一个指令示例）。时间在这里重要吗？编译前与编译后？再次感谢您，我仍在绞尽脑汁考虑何时根据最佳实践采取行动。是的，

$observe

用于观察插值表达式中的更改。你不必使用它，但这将是一个一次性的任务。（我更新了答案以显示它可能是动态的）至于link vs controller：简短的答案是controller用于为

需要

您的指令的其他指令公开API。详细回答：这是Angular的最后一部分，谢谢，这封信是给我的。controller=public API，而link=DOM操纵（事件绑定）和其他任何非公共功能。非常感谢您的回复和示例。

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

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

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

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

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');
    }
  }
});

<specific-cookie></specific-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>

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