我一直在思考Angularjs中的指令，例如ASP.Net中的用户控件，也许我错了。
用户控件使您可以将一堆功能封装到一个小部件中，该小部件可以放在任何地方的任何页面中。父页面不必向窗口小部件提供任何内容。我很难获得指令来执行接近该操作的操作。假设我有一个应用程序，一旦用户登录，我就会在某个地方的全局变量中挂起用户的名字/姓氏。现在，我想创建一个名为“ loggedinuser”的指令并将其放入我想要的任何页面中。它将使用从该全局变量中提取的已登录用户的名称来呈现一个简单的div。我如何做到这一点而不必让控制器将信息传递给指令？我希望在我的视图中使用该指令看起来像<loggedinuser />这样简单
这可能吗？
我猜您可以将指令粗略地概括为“将一堆功能封装到可放到任何地方的任何页面的小部件中的东西”，但是它的意义还不止这些。指令是一种通过创建新标签来扩展HTML的方法，使您可以编写更具表现力的标记。例如，您可以编写一个新标签，而不用编写一个<div>和一堆<li>标签来创建评分控件<rating>。或者，可以创建一对指令（例如和）来代替一对<div>s和<span>s及类似的东西来创建选项卡式界面，并按如下方式使用它们：<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;
}
};
});
如果您要开始创建功能强大且可重复使用的指令，那么关于指令的Angular开发指南是必去的地方。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句