Question

我正在使用angular 1.5的新component功能划分各种内容;特别是我有一个sidenav幻灯片菜单。

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

假设这样的html体;

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

navigation 需要才能在sidenav正确执行之前完成呈现。所以在我的组件文件中，我这样做（伪代码）;

SideNav组件

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

SideNav控制器

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

导航组件

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

导航控制器

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

容器组件

transclude = true;

容器控制器

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

所以基本上，容器上有一个计数器，我需要加载的每个组件都调用一个递减计数器的父函数。如果这导致计数器为0，则初始化sidenav。
但是，这感觉真的很棒。有没有其他方法可以获得某种形式的通知或行为，这可以让我在真正合适的时间初始化sidenav？

Answer 1

你可能想到一个更好的地方悬挂这些物品，但我对手表的想法是做这样的事情：

<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>

我只是在创建控制器时设置标志，但显然你可以在任何地方设置它们。那么你只需要看一个包含所有旗帜的表达式，然后当它们都评估为真时，你就可以开展业务了。

是否可以在角度分量完成加载时得到通知？

SideNav组件

SideNav控制器

导航组件

导航控制器

容器组件

容器控制器

1 个答案: