ngBind 等同于 NgModelController(或最佳实践）

ngBind equivalent of NgModelController (or best practice)

本文关键字：最佳 等同于 NgModelController ngBind      更新时间：2023-09-26

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

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

现在让我的想法蒙上阴影的是，对于非ngModel能力的 DOM 元素(如 span 或div 或除用户输入之外的任何内容(，似乎没有等同于NgModelController。基本上，看到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];
    }
  }
}]);

索引.html

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

控制器

角度-myapp.js

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

索引.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 });
});

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

索引.html

<specific-cookie></specific-cookie>

除非我误解了您的某些情况，否则执行此操作的最简单(也是适当(的方法是创建一个可重用的指令，该指令根据通过其属性传递给它的名称显示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>
相关文章：