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();
});