gpt4 book ai didi

javascript - 将 Controller 与指令分开?

转载 作者:行者123 更新时间:2023-11-30 08:34:39 25 4
gpt4 key购买 nike

这里是 Angular 的新手。我正在创建一个 top-nav 指令,如下所示:

<html>
<body ng-app="myApp">
<top-nav></top-nav>
</body>
</html>

这很好用。但是,假设我在 top-nav 之外有一个按钮,需要在 topNav 的 Controller 中调用 showLoginDialog() 方法。

为了让它工作,我需要像这样将 Controller 与顶部导航隔离:

<html>
<body ng-app="myApp">
<div ng-controller="TopNavController as topNav">
<top-nav></top-nav>
</div>
<!-- assume more markup here.... -->
<button ng-click="topNav.showLoginDialog()">
</body>
</html>

我的问题是:这是否被视为不良做法?也就是说,从指令中删除 Controller ,以便外部的东西可以访问它?

编辑:仅供引用 - 当您单击我的顶部导航中的“登录”按钮时,会出现我的“登录弹出窗口”。但是,我还希望这个“登录弹出窗口”能够在单击我主页上巨大的“注册”按钮时弹出。这就是为什么我问过如何从外部调用它。

最佳答案

如果 showLoginDialog 是跨组件的通用功能,但不存在于同一层次结构中,那么我发现如果您只实现一个服务就不会那么令人头疼:

app.factory('login', function() {
return {
showLoginDialog: function() {
// whatever
}
};
});

在您提供的示例中,不会有任何范围继承,因此您将无法从 topNav 访问该方法。但是,如果您将通用方法和属性放在服务/工厂中,那么您现在已经为自己提供了一种机制,您可以通过该机制在整个应用程序中共享信息的单一真实来源。这是更“Angular-ish”的方式。

编辑

要在 Controller 中使用该服务,只需注入(inject)它:

app.controller('topNav', function(login) {
$scope.showLogin = login.showLoginDialog;
});

app.controller('registerCtrl', function(login) {
$scope.showLogin = login.showLoginDialog;
});

取决于您的应用程序的结构,但虽然机制可能会发生变化,但政策将是相同的。

关于javascript - 将 Controller 与指令分开?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32766787/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com