An effective way to bind once, but allowing you to update all elements

Suppose a list of 1000 items is displayed with endless scrolling.

Each element displays: person firstName, lastName and mood. (to make it simple)

At first I did not want to listen to updates.
So the great angular-bindonce or even better: angular 1.3 a simply connected function did the trick.

Now I have created the pull-to-refresh component , which allows you to update all the elements.
However, as once the binding (and not reloading the page), my entire list did not take into account updates.

Using angular-bindonce, I have this now:

<div bindonce ng-repeat="person in persons track by person.id">
  <span bo-text="person.firstName"></span>
  <span bo-text="person.lastName"></span>
  <span bo-text="person.currentMood"></span>
</div>

The pull-to-refresh function runs this function:

$scope.refresh() {
    Persons.getList(function(response)) {
      $scope.persons = response.data;  //data being an array
    }
}

Question:

pull-to-refresh?
, .

... , angular.

, , ?

+4
3

angular-bind-notifier.

( ) :

<div ng-repeat="person in persons track by person.id" bind-notifier="{ eventKey:watchedExpression }">
  <span>{{:eventKey:person.firstName}}</span>
  <span>{{:eventKey:person.lastName}}</span>
  <!-- or with ng-bind if you prefer that -->
  <span ng-bind=":eventKey:person.currentMood"></span>
</div>

, watchedExpression - a $broadcast , bind-notifier, :key:expr .


, $broadcast :

$scope.$broadcast('$$rebind::' + key) // where 'key' === 'eventKey' in the example above.
+2

refresh-on , :

<div bindonce="persons" refresh-on="'refresh'" ng-repeat="person in persons track by person.id">
  <span bo-text="person.firstName"></span>
  <span bo-text="person.lastName"></span>
  <span bo-text="person.currentMood"></span>
</div>
0

All Articles