AngularJS指令屬性屬性全部未定義

Question

我用以下定義創建了一個指令

LastMeet.directive("progressBar", function() {
  return {
    restrict: "A",
    scope: {
      meeting: "&meeting"
    },
    link: function(scope, elm, attrs) {

      var meeting = scope.meeting();

      // Gather the details we need about this meeting
      var startDate = scope.meeting().start_datetime;
      var deadline  = scope.meeting().deadline;
      var complete  = scope.meeting().percentage_complete;
      console.log(meeting);
      console.log(meeting["start_datetime"]);

      // No point doing anything if we're already at 100%      
      if (complete < 100.0) {
        // Calculate how much to increment by every second
        var diff      = deadline - startDate;
        var increment = diff / 60.0;

        var timer;

        scope.percentage = complete;

        scope.onTimeout = function() {

          if (scope.percentage < 100.0) { 
            scope.percentage += increment;
            elm.css({ right: 100 - percentage + "%" });
            timer = $timeout(scope.onTimeout, 1000);
          }

        }

        // Setup our timer and get going :)
        timer = $timeout(scope.onTimeout, 1000);
      }

    }
  }
})

Meeting屬性是一個具有許多不同屬性的對象。 如您所見，我添加了2個控制台輸出，一個用於會議本身，另一個用於我嘗試訪問的屬性之一。 我的控制台具有以下輸出

b {$resolved: false, $then: function, $get: function, $save: function, $query: function…}
   $resolved: true
   $then: function (callback, errback) {
   agenda_items: Array[2]
   deadline: 1365897600
   description: "Meeting to discuss the progress of LastMeet"
   faye_token: "7468585e529849ca992efbd3b9de6337"
   icon: null
   id: 20
   name: "LastMeet"
   percentage_complete: 100
   start_datetime: 1365897600
   __proto__: b

這是會議對象的輸出，清楚地顯示了其中包含的start_datetime屬性。 但是第二個控制台輸出很簡單

undefined

為什么會議對象在那里，我可以看到所有內容，但是當我嘗試訪問所包含的屬性時，每次都會得到未定義的信息？

Answer 1

成功！ 因此，當指令運行時，變量尚未完全就緒似乎是一個問題。 它正在查看的會議對象是通過resource創建的，該resource會在獲取服務器數據時創建一個占位符對象，然后填充該對象。

我的猜測是，有角度地看到該對象存在（實際上是占位符），但是我想要的值實際上還不存在。 不知道為什么控制台輸出顯示它們在那里，但是很好。 為了解決這個問題，我在對象上添加了watch語句，該語句在實際更改並填充時將被刪除。 我的指令現在看起來像這樣

LastMeet.directive("progressBar", function($timeout) {
  return {
    restrict: "A",
    scope: {
      meeting: "=meeting"
    },
    link: function(scope, elm, attrs) {

      unwatch = scope.$watch('meeting', function(meeting) {
        if (meeting) {
          // Gather the details we need about this meeting
          var startDate = meeting.start_datetime;
          var deadline  = meeting.deadline;
          var complete  = meeting.percentage_complete;

          // No point doing anything if we're already at 100%      
          if (complete < 100.0) {
            // Calculate how much to increment by every second
            var diff      = deadline - startDate;
            var increment = diff / 60.0;

            var timer;

            scope.percentage = complete;

            scope.onTimeout = function() {

              if (scope.percentage < 100.0) { 
                scope.percentage += increment;
                elm.css({ right: 100 - scope.percentage + "%" });
                timer = $timeout(scope.onTimeout, 1000);
              }

            }

            // Setup our timer and get going :)
            timer = $timeout(scope.onTimeout, 1000);
          }

          unwatch();
        } 
      }, true)
    }
  }
})

現在我有一些計算問題，但它正在工作:)