gpt4 book ai didi

javascript - Angular1.3 : Access functions from standard controllers, 在使用controllerAs的 View 内?

转载 作者:行者123 更新时间:2023-12-02 15:54:39 24 4
gpt4 key购买 nike

我在主 app.js 文件中定义了一个简单的 Controller ,它控制导航栏的打开/关闭,并且在我的应用程序的所有其他 View 上可见:

app.js:

.controller('mainController', ['$scope', function($scope){
$scope.menuActive = false;

$scope.toggleMenu = function(){
$scope.menuActive = !$scope.menuActive;
}
}]);

index.html:

<nav class="side-menu"  ng-class="{ 'side-menu-open' : menuActive }">
<ul>
<li>LINK1</li>
<li>LINK2</li>
</ul>
</nav>

<!--Other views::.....-->
<div ui-view></div>

我的所有其他 View (使用controllerAs)都有一个带有 ng-click 的按钮,我用它来访问上面的 $scope.toggleMenu() 函数和 ng-class,但这不起作用,而且我不这样做也没有收到任何错误:

view1.html:

<span class="btn btn-default"
ng-click="toggleMenu()">
MENU
</span>

View1.js:

angular
.module('myApp.view1', [])

.controller('View1Ctrl', [
function(){
................
}
]);

此外,我再次这样做的原因是因为我的导航栏在我的应用程序中始终存在。这是否违背了最佳实践?

最佳答案

如果您使用 ..controller as .. 语法,请确保将其用于所有 Controller 。不要对此有选择性。

接下来,使用该语法时,不需要注入(inject) $scope 对象。您需要改为使用 this 变量,并将通常与 $scope 对象关联的任何属性或函数附加到 this 对象.

因此,

$scope.toggleMenu = function(){
$scope.menuActive = !$scope.menuActive;
}

变成了

this.toggleMenu = function(){
this.menuActive = !this.menuActive;
}

最后,在您看来,请确保将每个表达式与 Controller 相关联。

<div ng-controller="mainController as main">
<nav class="side-menu" ng-class="{ 'side-menu-open' : main.menuActive }">
<ul>
<li>LINK1</li>
<li>LINK2</li>
</ul>
</nav>
<div ui-view>
<!-- Assuming that the following gets compiled to ui-view -->
<span class="btn btn-default" ng-click="main.toggleMenu()">
MENU
</span>
</div>
</div>

您可以获得有关使用controller as 语法的更多提示 here

关于javascript - Angular1.3 : Access functions from standard controllers, 在使用controllerAs的 View 内?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31653436/

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