Angularjs：在用戶登錄時用不同模板重繪指令

在我們的總體佈局中，我們有一個側邊欄，其中包含一些用戶詳細信息，如姓名和縮略圖。但也有一些不同的東西。Angularjs：在用戶登錄時用不同模板重繪指令

我們的想法是在側邊欄加載一個指令，其中有2個模板，登錄時爲1，註銷時爲1。

顯示並不顯示用戶詳細信息。

但是，我們有一個叫邊欄指令與2的工作，

App.directive（ '邊欄'，[ 'UserService'， '$編譯'，功能（用戶，$編譯）{

var getTemplate = function() { 
    console.warn(User.isLogged); 
    var templateUrl = "#sidebar" + ((User.isLogged) ? '_loggedin' : '') + "_template"; 
    console.log('requesting template: [%s]', templateUrl); 
    return $(templateUrl).html(); 
}; 

return { 
    restrict: 'A', 
    link: function link(scope, element, attrs) { 
     var tmpl = getTemplate(); 
     element.html(tmpl); 
     element.replaceWith($compile(element.html())(scope)); 
    }, 
    template: getTemplate() 
};

}]）;

，我們在服務

App.factory('UserService', [function userService() { 
var User = { 
    isLogged: false, 
    username: '' 
}; 
return User; 
}]);

登錄表單加載我們的用戶細節接受這個UserService的依賴，並設置它的isLogged到true

，但我怎麼可以讓指令重繪側邊欄，當isLogged被更改？

我們是這樣做的嗎？

來源

2013-07-26 Sander

有被稱爲編譯階段，其中角

遍歷DOM以識別所有已註冊的指令在模板的一個階段。對於每個指令，它會根據指令的規則（模板，替換，transclude等）轉換DOM，並在編譯函數存在的情況下調用它。結果是一個編譯的模板函數，它將調用從所有指令收集的鏈接函數。

基本上，你不能有條件地加載模板 - 它會編譯你給它的第一個模板。如果要動態地呈現你的看法，你可以使用兩個div與NG秀指令在模板中：

<div ng-show="user.isLogged">// logged in content</div> 
<div ng-show="!user.isLogged">// logged out content</div>

你可能會認爲你需要一個工廠注入到你的指令 - 我剛纔嘗試這樣做，這是行不通的！我相信這是因爲指令只能與作用域鏈上的那些設置單向和雙向綁定。考慮到這一點，我帶來的用戶對象爲應用範圍廣：

App.controller("AppCtrl", function($rootScope, UserService) { 
    $rootScope.user = UserService; 
})

，然後用於從該指令的開放範圍：

app.directive("sidebar", function() { 

    return { 
    restrict: "A", 
    template: '<div>' + 
     '<div ng-show="user.isLogged">Logged In</div>' + 
     '<div ng-show="!user.isLogged">Logged Out</div></div>', 
    } 

})

這裏的用戶對象正在通過範圍發現鏈接。由於該指令沒有隔離作用域（我沒有聲明範圍屬性），它通過作用域鏈找到它 - 直到根作用域。當然，這是一個意義上的「全球性」，而且容易被隱藏：

$scope.user = somethingElse

不是最漂亮的解決方案，但它的工作。

您也可以在鏈接函數中有條件地操作DOM，或者更好 - 將這種邏輯卸載到使用嵌套模板並解析的路由器。

來源

2013-07-26 13:39:18

這看起來很好，另一個選項可能是ng-include，其中templateURL被更改。 – shaunhusain

我試過你的解決方案，但是我不相信結果，問題是，登錄版本，例如有一個用戶頭像，如果我有'src屬性'src =「/ images/users/{{user.avatar}}「'不要緊，如果節目顯示它，它會得到渲染，這意味着當user.avatar屬性未定義時它將拋出404 任何想法如何解決這樣的事情？ – Sander

你應該檢查出ngSrc：http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngSrc :) 應該照顧空值，並將正確解析指令。 –

Angularjs：在用戶登錄時用不同模板重繪指令

回答

相關問題