angularJS的执行顺序是什么？

Question

我是一个开始使用角材料的新手。 我正在使用侧边栏。

基本上，就像

<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
</md-sidenav>
<md-button id="side-button" ng-click="toggleLeft()"></md-button>

$scope.toggleLeft = function() {
                $mdSidenav('left').toggle()
                    .then(function(){
                        $log.debug("toggle left is done");
                    });
            };

它按预期工作。 但是，当我在该js之后写另一行时，有一件奇怪的事情：

timeLine.toggle_left_most = $scope.toggleLeft();

并将ng-click="toggleLeft()"替换为ng-click="timeLine.toggle_left_most()" ，它向我返回了“找不到句柄'left'的实例”。

但是，当我在$mdSidenav('left').toggle()之后插入一行以查询带有md-component-id =“ left”的元素时，它返回了该对象。 这使我想知道AngularJS的执行顺序和更深层的原理。

我的问题是，为什么已经加载DOM时为什么返回“找不到实例”？ 为什么添加一行任务会破坏代码？ $ mdSidenav是否不仅需要DOM，还需要加载其他一些东西？ 那关键的是什么？

是有问题的原因是，当我不写该行时，不会立即执行对$ scope.toggleLeft的赋值吗？ 那什么时候执行呢？

Answer 1

你宣布

timeLine.toggle_left_most = $scope.toggleLeft();

但是timeLine对象将不可用于您的html模板，因为它不是$ scope变量，因此您的代码应如下所示

var toggleLeft=function() {
                $mdSidenav('left').toggle()
                    .then(function(){
                        $log.debug("toggle left is done");
                    });
            };

$scope.timeLine.toggle_left_most=toggleLeft;

通常我遵循上述风格。 我不确定这个答案...

Answer 2

在JavaScript中，函数是对象。 如果使用() ，则说明正在执行函数，但重要的是要了解您不在管理函数的定义。

因此， timeLine.toggle_left_most = $scope.toggleLeft(); 实际上正在运行$scope.toggleLeft并将其返回值分配给timeLine.toggle_left_most 。

我不明白您为什么要那样做。

Answer 3

这里描述了No instance found for handle left的问题-https: //github.com/SebastianMetzger/angular-material-inbox/issues/1

除了那里描述的解决方案之外，这对我来说还行得通-使用$ mdComponentRegistry的getInstances方法来检查当前有哪些可用项，而没有跳过任何项：

//on some event, state change for example
$rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) {
  if ($mdComponentRegistry.getInstances().length) $mdSidenav('left').close();
});