Question

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

用户控件允许您将一堆功能封装到窗口小部件中，该窗口小部件可以放在任何位置的任何页面中。父页面不必向窗口小部件提供任何内容。我无法获得指令来做任何接近它的事情。假设我有一个应用程序，一旦用户登录，我就会在某个地方的全局变量中挂起用户的名/姓。现在，我想创建一个名为'loggedinuser'的指令并将其放入我想要的任何页面中。它将呈现一个简单的div，其中包含从该全局变量中提取的登录用户的名称。如何在不让控制器将该信息传递到指令中的情况下如何做到这一点？我希望在我的视图中使用该指令看起来很简单＆LT;与loggedInUser /＆GT;

这可能吗？

Answer 1

我想你可以大致总结一下这个指令是什么“将一堆功能封装到一个小部件中的东西，可以放到任何地方的任何页面中”，但还有更多的东西。指令是一种通过创建新标记来扩展HTML的方法，允许您编写更具表现力的标记。例如，您可以使用新的<div>标记将其包装起来，而不是编写<li>和一堆<rating>标记来创建评级控件。或者，您可以实现一对指令，例如<div>和<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 here。

如果您想开始创建功能强大，可重复使用的指令，Angular dev guide on directives是必须去的地方。

理解Angularjs中的“指令”范式

1 个答案: