0

I thought there was a way that I can just display something on the page and not have AngularJS check it for changes.

Can someone tell me how to do this? Is it just if I have a label like this:

{{ abc }}

Alan2
  • 23,493
  • 79
  • 256
  • 450
  • Please include the full code and a better description. If `abc` be a scoped variable, then yes Angular will update it. – Tim Biegeleisen Oct 03 '16 at 08:50
  • I want it to display data from scope but it's just display only. {{ abc }} will display it. – Alan2 Oct 03 '16 at 08:52
  • What is your actual question? – Tim Biegeleisen Oct 03 '16 at 08:54
  • I want to display a grid full of data and want to do many lines so I know if I use ng-model it's going to watch all the inputs. How can I make it so it doesn't watch or update what's displayed if the model changes. – Alan2 Oct 03 '16 at 08:57
  • Would there be anything wrong with maintaining a set of scoped variables which are snapshots of the model values? This way, when the model changes these values would not also change. – Tim Biegeleisen Oct 03 '16 at 09:00

4 Answers4

2

You may use binding like this {{::abc}} so you app will not watch for changes after first render of the data. See one-time-binding doc

Makarov Sergey
  • 932
  • 7
  • 21
0

It is a scope variable. Means your controller has an scope object as $scope if you define any variable like $scope.abc = "string". then a new property called abc will be created in your controller scope. In AngularJS scope object was always watched and once any change in that object made it will reflect in the view.

AB Udhay
  • 643
  • 4
  • 9
  • But is there a way I can do it so it's not watched? I just want to create a report with a 1000+ rows. – Alan2 Oct 03 '16 at 08:59
  • this may help http://stackoverflow.com/questions/13651578/how-to-unwatch-an-expression – AB Udhay Oct 03 '16 at 09:06
0

Thankfully, Angular 1.3 and up versions has put a lot of effort into performance with the feature One-time binding using {{ ::abc }} works:

angular
    .module('MyApp', [])
    .controller('MyController', function($scope, $timeout) {
        $scope.abc = 'Some text'

        $timeout(function() {
            $scope.abc = 'new value';
            console.log('Changed but not reflected in the view:', $scope.abc);
        }, 1000);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>

<div ng-app="MyApp" ng-controller="MyController">
    <p>{{ ::abc }}</p>
</div>
Yosvel Quintero
  • 18,669
  • 5
  • 37
  • 46
0

As there is a two-way data binding, angular will watch for any changes on the variable $scope.abc and update the DOM with the changes. However if you want to make sure it does not watch for any changes you can go for the one-way binding, where any change made to the variable will not be watched upon by angular. You can do this using by {{::abc}} or ng-bind="::abc".

For example refer - https://jsfiddle.net/m8L2pogg/

Abhishek Pandey
  • 300
  • 1
  • 13