个人中心
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
文章推荐： sql-server - 用于确定对象层次结构深度的 CTE 与 T-SQL 循环
文章推荐： sql-server - 如何编写键盘快捷键以从选定的表中选择前 1000 个*？
文章推荐： sql - 在SQL中查找最长的连续递增数字序列
文章推荐： pagination - 如何通过引用 Android Auto MediaBrowser 在 MediaBrowserServiceCompat 中设置 EXTRA_PAGE 和 EXTRA_PAGE_SIZE？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com