Geeks With Blogs
Zakaria's Blog
The Dot :
index.html
 <div ng-app="">  
  <input type="text" ng-model="data.message">  
  <h1>{{ data.message }}</h1>   
  <div ng-controller="FirstCtrl">  
   <input type="text" ng-model="data.message">  
   <h1>{{ data.message }}</h1>  
  </div>  
  <div ng-controller="SecondCtrl">  
   <input type="text" ng-model="data.message">  
   <h1>{{ data.message }}</h1>  
  </div>  
 </div>  
main.js
 function FirstCtrl($scope) {  
 }   
 function SecondCtrl($scope) {  
 }   
In this setup, all three instances of data.message are bound to each other through the first data.message, which is in the scope of the entire application.
If we were to replace the instances of data.message with just message,
index.html
 <div ng-app="">  
  <input type="text" ng-model="message">  
  <h1>{{ message }}</h1>  
  <div ng-controller="FirstCtrl">  
   <input type="text" ng-model="message">  
   <h1>{{ message }}</h1>  
  </div>  
  <div ng-controller="SecondCtrl">  
   <input type="text" ng-model="message">  
   <h1>{{ message }}</h1>  
  </div>  
 </div>  
It breaks the scope inheritance that was binding all the data.message instances. Now, each new ng-model of message is creating a new instance of message, and so each model will be an unbound instance.
Defining a Method on the Scope
index.html
 <div ng-app="myApp">  
  <div ng-controller="FirstCtrl">  
   <input type="text" ng-model="data.message">  
   <h1>{{ data.message }}</h1>  
  </div>  
  <div ng-controller="SecondCtrl">  
   <input type="text" ng-model="data.message">  
   <h1>{{ data.message }}</h1>  
  </div>  
 </div>  
main.js
 var myApp = angular.module('myApp', []);  
 myApp.factory('Data', function () {  
  return { message: "I'm data from a service" }  
 });   
 function FirstCtrl($scope, Data) {  
  $scope.data = Data;  
 }  
 function SecondCtrl($scope, Data) {  
  $scope.data = Data;  
 }  
We’ll add a function reversedMessage() to the SecondCtrl $scope as follows:
main.js
 function SecondCtrl($scope, Data) {  
  $scope.data = Data;   
  $scope.reversedMessage = function() {  
   return $scope.data.message.split("").reverse().join("");  
  };  
 }   
Now, as with variables in the scope, the reversedMessage() method can now be invoked in the view:
index.html
 <div ng-controller="SecondCtrl">  
   <input type="text" ng-model="data.message">  
   <h1>{{ reversedMessage() }}</h1>  
  </div>  
Instead of referencing the data.message model within the method definition, it is better to pass in the data as a parameter to the reversedMessage() method. This removes the scope dependency inside the method which is cleaner and allows for easier testing.
The data.message model is passed to the invoked method as a parameter:
index.html
 <div ng-controller="SecondCtrl">  
   <input type="text" ng-model="data.message">  
   <h1>{{ reversedMessage(data.message) }}</h1>  
  </div>  
And it is used in the method simply as the message parameter:
main.js

 function SecondCtrl($scope, Data) {  
  $scope.data = Data;  
  $scope.reversedMessage = function(message) {  
   return message.split("").reverse().join("");  
  };  
 }  
Posted on Wednesday, June 4, 2014 9:11 PM Grails | Back to top


Comments on this post: Angular js Basics-The Dot & Defining a Method on the Scope

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © A.K.M. Zakaria | Powered by: GeeksWithBlogs.net