瞭解Angularjs中的'指令'範例

Question

我一直在考慮像Angularjs中的指令，像ASP.Net中的用戶控件，也許我錯了。

用戶控件允許您將一堆功能封裝到可以放到任何地方的任何頁面的小部件中。父頁面不必向小部件提供任何內容。我很難得到指令去做任何接近於此的事情。假設我有一個應用程序，在用戶登錄後，我會在某處放置全局變量中的用戶名/姓。現在，我想創建一個名爲'loggedinuser'的指令並將其放入我想要的任何頁面。它將呈現一個簡單的div，其中包含從該全局變量中提取的登錄用戶的名稱。我怎麼做，而不必讓控制器將這些信息傳遞給指令？我想在我看來這個指令的用法看起來很簡單 < loggedinuser/>

這可能嗎？

Answer 1

我想你可以粗略地總結一下指令是什麼「將一些功能封裝到一個可以放到任何頁面的小部件中的東西」，但除此之外還有更多。指令是通過創建新標籤來擴展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>標籤來顯示登錄用戶的名稱，而不需要控制器提供信息。但是你絕對不應該依賴全局變量。該角的方式做這將是使用一種服務來存儲這些信息，並將其注入指令：

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是一個必須去的地方。