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：在用户登录时用不同模板重绘指令

回答

相关问题