gpt4 book ai didi

angularjs - 当 Angular 组件完成加载时是否可以收到通知?

转载 作者:行者123 更新时间:2023-12-02 23:05:13 24 4
gpt4 key购买 nike

我正在使用 Angular 1.5 的新组件功能来划分各种事物;特别是我有一个 sidenav 滑出菜单。

sidenav 需要在其他组件加载完成后运行其初始化代码。到目前为止,我找不到任何可以帮助我打破这种逻辑的东西。目前,我正在通过一个困惑的黑客来完成这个任务,就像这样。

假设 html 正文如下所示;

<body>
<container>
<navigation></navigation>
<sidenav></sidenav>
</container>
</body>

导航 需要完成渲染,sidenav 才能正确执行。所以在我的组件文件中,我正在这样做(伪代码);

SideNav 组件

bindings = {};
require = { Container: '^container' };

SideNav Controller

$postLink = function() { 
Container['Ready']();
}

导航组件

bindings = {}; 
require = { Container: '^container' };

导航 Controller

$postLink = function() {
if(Container['Ready'])
Container['Ready']();
}

容器组件

transclude = true;

容器 Controller

pending = 2; // controls that must finish loading
Ready = function() {
pending--;
if( pending > 0 )
return;
// code to initialize sidenav via jQuery
}

所以基本上,容器上有一个计数器,我需要加载的每个组件都会调用父级上的一个函数来递减计数器。如果这导致计数器为 0,则 sidenav 被初始化。

不过,这感觉真的很caddywhompus。有没有其他方法可以获取某种形式的通知或行为,使我能够在真正合适的时间初始化侧导航?

最佳答案

您可能会想到一个更好的地方来悬挂这些元素,但我对 watch 的想法是做这样的事情:

<html ng-app="myApp">
<body ng-controller="appController as AppCtrl">
<div>
<component1/></component1>
<component2></component2>
<component3></component3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
angular.module("myApp",[])
.controller("appController", function($rootScope,$scope) {
var ctrl=this;
ctrl.readyForAction = readyForAction;
ctrl.letsParty = letsParty;
$scope.$watch("$rootScope.gotBeer && $rootScope.gotPizza && $rootScope.gotHockey",ctrl.readyForAction)

function readyForAction() {
if ($rootScope.gotBeer && $rootScope.gotPizza && $rootScope.gotHockey) {
ctrl.letsParty()
}
else
{
console.log("Not yet!")
}
};

function letsParty() {
alert("Let's go Red Wings!")
};
})
.component("component1", {
template:"<h1>Beer</h2>",
controller: function($rootScope) {
$rootScope.gotBeer=true;
}
})
.component("component2", {
template: "<h1>Pizza</h1>",
controller: function($rootScope) {
$rootScope.gotPizza = true;
}
})
.component("component3", {
template: "<h1>Hockey</h1>",
controller: function($rootScope) {
$rootScope.gotHockey = true;
}
})
</script>
</body>
</html>

我只是在创建 Controller 时设置标志,但显然您可以在任何地方设置它们。因此,您只需观看由所有标志组成的表达式,然后当它们全部评估为 true 时,您就可以继续您的业务了。

关于angularjs - 当 Angular 组件完成加载时是否可以收到通知?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37209554/

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