2

I'm trying to use one-time binding when displaying some content to user if there are any values in array.

I'm using this code:

app.controller('MainCtrl', function($scope, $timeout) {
  loadHeroes = function() {
    $scope.heroes = ['Superman', 'Batman', 'Spider-Man'];
  };

  $timeout(loadHeroes, 5000);

});

And this:

<div ng-controller="MainCtrl">
  <pre ng-show="::heroes.length > 2">There are a few heroes!</pre>
  <pre>{{::heroes | json}}</pre>
</div>

Here is Plunker: http://plnkr.co/edit/k1kxutLd8fOWSoXc81sk?p=preview

But message is not showing. I tried to set parentheses around array, but it's not working either.

Any idea how can I achieve one-time binding with checking array length?

5
  • @BhojendraNepal that's the syntax for one time binding
    – rmuller
    Jul 23, 2015 at 10:02
  • as far as I know one-time binding is only delay if the value evaluate to "undefined", so in your case that can evaluate to "false", which would stop watching.
    – YOU
    Jul 23, 2015 at 10:57
  • you can try this way - ::heroes.length > 2 ? true : undefined - plnkr.co/edit/4hCi7hRXpDNSaWTkBmOF?p=preview
    – YOU
    Jul 23, 2015 at 10:59
  • 2
    before timeout trigger, heroes is undefined, and heroes.length is undefined in angular, undefined > 2 evaluate to false in javascript. but "false" is "defined", so angular stop watching at that point, and ng-show get false, so it never show.
    – YOU
    Jul 23, 2015 at 11:05
  • @YOU thanks, that makes sense.
    – dubadub
    Jul 23, 2015 at 11:09

3 Answers 3

1

Use ng-if :

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  loadHeroes = function () {
    $scope.heroes = ['Superman', 'Batman', 'Spider-Man'];
  };
  
  $timeout(loadHeroes, 5000);
  
});
  
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <pre ng-if="::heroes.length">There are a few heroes!</pre>
    <pre>{{::heroes | json}}</pre>
    
  </body>

</html>

It will "wait" for the variable to be set.

http://plnkr.co/edit/SMBSMhMPUlRFaRBN0xtb?p=preview

1

Although, some answers are solving my question, it's good to know what is the actual reason of the behaviour described in question.

Thanks to user @YOU for his comments to question, and clarifying the subject. Below, his explanation with some formatting.

So, in initial state heroes is undefined, and heroes.length is undefined in AngularJS as well. In Javascript undefined > 2 evaluates to false. But false is defined, so Angular stop watching at that point, and ng-show get false, so it never show.

Solution in this case can be explicit expression ng-show="::heroes.length > 2 ? true : undefined".

0

The syntax :::

render data once and let it persist without being affected by future Model updates

The $scope value is not updated, so your view is not updated after the $timeout.

Removing this syntax works for ng-show http://jsfiddle.net/2ctyjfk0/:

angular.module('Joy', [])
    .controller('IfCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $timeout(function () {
        $scope.names = ['Joy', 'Elit', 'Carl'];
    }, 3000);
}]);

Html:

<div ng-app="Joy">
    <div ng-controller="IfCtrl">
        <div ng-show="names">Names: {{ names | json }}</div>
    </div>
</div>

Alternatively, you can use ng-if. It is working in your case because:

ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM...Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored.

If removing/inserting the DOM elements is acceptable for you, choose ng-if.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.