firebase 加载到 DOM 后的事件

Question

我想根据来自 firebase 的值更改输入字段中字体的颜色。

在 jquery 中，我使用 $(document).ready() 但我的代码在 firebase 数据加载到 dom.

之前触发

我已恢复使用 setTimeout() 来为 dom 提供足够的加载时间，但这并不是真正的方法。

必须有一个事件在数据附加到 DOM 后触发？

app.controller('myCtrl', function($scope, $stateParams, $firebaseObject) {

      var ref = new Firebase('xxxxxxxxx');
      $scope.Details = $firebaseObject(ref);

//what I really need is, "tell me when the firebase object is loaded to the DOM 
//so I can do my stuff"


    setTimeout(function(){ 
      if($("#idInput").val() ==='foo'){
      $("#idInput").css("color", "red");
      }
    }, 500);

});

Answer 1

你似乎不需要在这里使用 setTimeout，你可以使用 ng-class 指令在输入值的变化上应用 CSS。

HTML

<input id="idInput" ng-model="idInput" ng-class="{ 'red': idInput == 'foo' }"/>

CSS

.red {
   color: red;
}

如果您真的有兴趣在通过 $firebaseObject(ref) 加载数据后做一些事情，那么您应该使用 $loaded 方法而不是 $firebaseObject，一旦数据加载，该方法就会被调用。将更喜欢使用 $timeout 而不是 setTimeout 通过运行摘要周期使同步范围变量与 html 绑定。此外，不要从控制器进行 DOM 操作，它被视为反模式。

代码

$scope.Details = $firebaseObject(ref);
$scope.Details.$loaded()
.then(function(data) {
    //do some code
    $timeout(function(){ 
        //you shouldn't use DOM manipulation from angular controller.
        //if($("#idInput").val() ==='foo'){
        //$("#idInput").css("color", "red");
      }
    }, 500);
})

Answer 2

使用$loaded()，如果你需要使用来自$firebaseObject的数据。

$scope.Details = $firebaseObject(ref);
$scope.Details.then(function(data) {
   // loaded data here
});

否则，$firebaseObject 会在数据加载后通知 $digest 循环。

另一种策略是在路由器中使用resolve将数据加载到控制器中。这更简洁，因为您不需要打开承诺。

.config(function($stateProvider) {
  $stateProvider.state('home', {
    controller: 'myCtrl',
    template: 'myTemplate.html',
    resolve: {
      details: function($firebaseObject, $stateParams) {
        var ref = new Firebase('xxxxxxxxx');
        var childRef = ref.child($stateParams.id);
        return $firebaseObject(childRef).$loaded();
      }
    }
  });
})

然后在您的控制器中将解析数据：

.controller('myCtrl', function($scope, details) {
  $scope.Details = details; // totally available to use
})

Read the docs for more information on resolving data with routing and AngularFire.

firebase 加载到 DOM 后的事件

event after firebase is loaded into the DOM

javascript

jquery

angularjs

firebase

angularfire