Controllers are the Data Context against which we bind in our app's partial view templates.

When defining a controller, we always pass in $scope. We can then attach variables to $scope:

Example Controller
 angular
.module('ndslabs')
.controller('TestController', [ '$scope', function($scope) {
  $scope.message = 'Hello, World!';
}]);

Now, any variable that we attached to $scope can be dereferenced in the view template:

Example Partial View
<!-- {{ expression }} is Angular shorthand for "evaluate expression, and re-evaluate as its inputs change" -->
<section>
  {{ message }}
</section>

One-Time Binding

Normally, this step should not be necessary (assuming you follow a good AngularJS design philosophy).

Occasionally, circumstances may arise where you would like to display data one time (at startup), and not listen for changes to this data set.

Simply adding the following notation before your binding tells Angular not to listen for changes to this binding once its value has been set:

Bind-Once
<!-- {{ expression }} is Angular shorthand for "evaluate expression, and re-evaluate as its inputs change" -->
<!-- But {{ ::expression }} simply means "only evaluate once, and stop listening when a truthy value is found" -->
<section>
  {{ ::message }}
</section>

 

 

  • No labels