2

我一直在考虑 Angularjs 中的指令，例如 ASP.Net 中的用户控件，也许我错了。

用户控件允许您将一堆功能封装到一个小部件中，该小部件可以拖放到任何地方的任何页面中。父页面不必为小部件提供任何内容。我很难得到指令来做任何接近那个的事情。假设我有一个应用程序，一旦用户登录，我将用户的名字/姓氏挂在某个全局变量中。现在，我想创建一个名为“loggedinuser”的指令并将其放到我想要的任何页面中。它将使用从该全局变量中提取的登录用户的名称呈现一个简单的 div。我如何做到这一点而不必让控制器将该信息传递给指令？我希望在我看来指令的使用看起来像 <loggedinuser/> 一样简单

这可能吗？

4

1 回答 1

2

我想您可以粗略地将指令概括为“将一堆功能封装到一个可以拖放到任何地方的任何页面的小部件中的东西”，但除此之外还有更多。指令是一种通过创建新标签来扩展 HTML 的方法，允许您编写更具表现力的标记。例如，您可以用一个新标签将其包装起来，而不是编写一个<div>和一堆<li>标签来创建评级控件<rating>。或者，你可以实现一对指令，比如and ，而不是大量的<div>s 和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>标签来显示登录用户的名称，而无需控制器向其提供信息。但是您绝对不应该为此依赖全局变量。Angular 的做法是使用服务来存储该信息，并将其注入指令中：

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

Plunker在这里。

如果你想开始创建强大的、可重用的指令，Angular 的指令开发指南是必去之地。

于 2013-10-01T03:35:25.373 回答