angularjs - 理解 Angularjs 中的 'directive' 范例

Question

我一直在思考 Angularjs 中的指令就像 ASP.Net 中的用户控件一样，也许我的想法是错误的。

用户控件允许您将一堆功能封装到一个小部件中，该小部件可以放置到任何页面的任何位置。父页面不必向小部件提供任何内容。我很难得到指示来做任何类似的事情。假设我有一个应用程序，一旦用户登录，我就会在某处的全局变量中保留用户的名字/姓氏。现在，我想创建一个名为“loggedinuser”的指令并将其放入我想要的任何页面中。它将呈现一个简单的 div，其中包含从该全局变量中提取的登录用户的名称。我该如何做到这一点，而不必让 Controller 将该信息传递到指令中？在我看来，我希望该指令的用法看起来像 <登录用户/>

这可能吗？

Answer 1

我想你可以粗略地将指令总结为“将一堆功能封装到一个小部件中的东西，可以将其放入任何页面的任何位置”，但它的含义远不止于此。指令是一种通过创建新标签来扩展 HTML 的方法，允许您编写更具表现力的标记。例如，不要写 <div>还有一堆<li>为了创建评级控件，您可以使用新的 <rating> 来将其包装起来。标签。或者，代替大量 <div> s，和<span>以及诸如此类的东西来创建选项卡式界面，您可以实现一对指令，例如 <tab>和<tab-page> ，并像这样使用它们:

<tab>
  <tab-page title="Tab 1"> tab content goes here </tab-page>
  <tab-page title="Tab 2"> tab content goes here </tab-page>
</tab>

这就是指令增强 HTML 的真正力量。这并不意味着您应该只创建“通用”指令；您可以而且应该针对您的应用程序制作特定的组件。所以，回到你的问题，你可以实现 <loggedinuser>标签来显示登录用户的名称，而不需要 Controller 向其提供信息。但你绝对不应该为此依赖全局变量。 Angular 的方法是使用服务来存储该信息，并将其注入(inject)指令中:

app.controller('MainCtrl', function($scope, userInfo) {
  $scope.logIn = function() {
    userInfo.logIn('Walter White');
  };

  $scope.logOut = function() {
    userInfo.logOut();
  };
});

app.service('userInfo', function() {
  this.username = ''
  this.logIn = function(username) {
    this.username = username;
  };
  this.logOut = function() {
    this.username = '';
  };
});

app.directive('loggedinUser', function(userInfo) {
  return {
    restrict: 'E', 
    scope: true,
    template: '<h1>{{ userInfo.username }}</h1>',
    controller: function($scope) {
      $scope.userInfo = userInfo;
    }
  };
});

笨蛋here .

Angular dev guide on directives如果您想开始创建强大的、可重用的指令，这是一个必去的地方。