理解Angularjs的'指令'范式 [英] Understanding the 'directive' paradigm in Angularjs

问题描述

我一直在思考关于Angularjs指令就像在ASP.Net用户控件，也许我错了。

I have been thinking about directives in Angularjs like user controls in ASP.Net, and perhaps I have it wrong.

一个用户控件，可以封装一堆功能合并到任何地方都可以投进任何页面一个小部件。父页面没有提供任何小部件。我有麻烦指令做任何接近。假设我有在那里，一旦我在一个全局变量挂到用户的第一/姓氏某处用户登录的应用程序。现在，我想创建一个名为与loggedInUser'指令，把它放到我想任何页面。它会渲染登录的用户从全局变量拉到名称的简单股利。我怎么做，而不必让控制器传递信息到指令？我想指令的用法，我认为看那样简单
    ＆LT;与loggedInUser /＆GT;

A user control lets you encapsulate a bunch of functionality into a widget that can be dropped into any page anywhere. The parent page doesn't have to provide anything to the widget. I am having trouble getting directives to do anything close to that. Suppose that I have an app where, once the user has logged in I hang onto the first/last name of the user in a global variable somewhere. Now, I want to create a directive called 'loggedinuser' and drop it into any page I want. It will render a simple div with the name of the logged in user pulled from that global variable. How do I do that without having to have the controller pass that information into the directive? I want the usage of the directive in my view to look as simple as <loggedinuser/>

这可能吗？

推荐答案

我想你可以大致总结出指令是什么的的东西，它封装了一大堆的功能合并到任何地方都可以投进任何页面窗口小部件，但还有比这更给它。一个指令是通过创建新的标签，让你写出更前pressive标记来扩展HTML的一种方式。例如，而不是写在＆LT; D​​IV＆GT; 和一堆＆LT;李＆GT; ，以创建标签评级＆GT;评级控制，你可以用新的＆LT包起来标记。或者，而不是大量的＆LT; D​​IV＆GT; s和＆LT;跨度＆GT; 和诸如此类的东西来创建一个标签接口，可以实现对指令的，比方说，＆LT;标签＆gt; 和＆LT;标签页＆GT; ，并利用它们是这样的：

I guess you can roughly sum up what a directive is as "something that encapsulates a bunch of functionality into a widget that can be dropped into any page anywhere", but there's more to it than that. A directive is a way to extend HTML by creating new tags, allowing you to write more expressive markup. For instance, instead of writing a <div> and a bunch of <li> tags in order to create a rating control, you could wrap it up with a new <rating> tag. Or, instead of lots of <div>s, and <span>s and whatnot to create a tabbed interface, you could implement a pair of directives, say, <tab> and <tab-page>, and use them like this:

<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。这并不意味着你应该只创建通用的指示;你可以和应该做的组件特定于应用程序。所以，回到你的问题，你可以实现一个＆LT;与loggedInUser＆GT; 标签无需控制器，它提供的信息显示已登录用户的名称。但是，你绝对不应该依赖于一个全局变量。该角的方式做这将是使用一种服务来存储这些信息，并将其注入到指令：

That's the truly power of directives, to enhance HTML. And that doesn't mean that you should only create "generic" directives; you can and should make components specific to your application. So, back to your question, you could implement a <loggedinuser> tag to display the name of the logged user without requiring a controller to provide it with the information. But you definitely shouldn't rely on a global variable for that. The Angular way to do it would be make use of a service to store that information, and inject it into the directive:

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

这里。

href=\"http://docs.angularjs.org/guide/directive\" rel=\"nofollow\">上指示角度开发指南是，如果你想开始创建必须去的地方

The Angular dev guide on directives is a must-go place if you want to start creating powerful, reusable directives.

这篇关于理解Angularjs的'指令'范式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！