Vikram Naidu

SHARING DATA BETWEEN CONTROLLERS USING $scope

1) Use $parent while binding premetive model object

<html ng-app="nestingApp">
<style>
div {
margin: 5px;
border: 1px solid gray;
padding: 10px;
}
</style>
<body>
<div ng-controller="ctrl1">
CTRL1 MSG: <input ng-model="msg"/>
<div ng-controller="ctrl2">
CTRL2 MSG: <input ng-model="$parent.msg"/>
<div ng-controller="ctrl3">
CTRL3 MSG: <input ng-model="$parent.$parent.msg"/>
</div>
</div>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module("nestingApp", [])
.controller("ctrl1", function($scope){
$scope.msg = "This is ctrl1 msg object.";
})
.controller("ctrl2", function($scope){})
.controller("ctrl3", function($scope){})
</script>
</body>

</html>

2) Use alias for controller bindings

<html ng-app="nestingApp">
<style>
div {
margin: 5px;
border: 1px solid gray;
padding: 10px;
}
</style>
<body>
<div ng-controller="ctrl1 as c1">
CTRL1 MSG: <input ng-model="c1.msg"/>
<div ng-controller="ctrl2 as c2">
CTRL2 MSG: <input ng-model="c1.msg"/>
<div ng-controller="ctrl3">
CTRL3 MSG: <input ng-model="c1.msg"/>
</div>
</div>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module("nestingApp", [])
.controller("ctrl1", function(){
this.msg = "This is ctrl1 msg object.";
})
.controller("ctrl2", function($scope){
$scope.c1.msg = "Updated in ctrl2";
})
.controller("ctrl3", function($scope){})
</script>
</body>

</html>

3) Use json denfinition while defining models

<html ng-app="nestingApp">
<style>
div {
margin: 5px;
border: 1px solid gray;
padding: 10px;
}
</style>
<body>
<div ng-controller="ctrl1">
CTRL1 MSG: <input ng-model="user.msg"/>
<div ng-controller="ctrl2">
CTRL2 MSG: <input ng-model="user.msg"/>
<div ng-controller="ctrl3">
CTRL3 MSG: <input ng-model="user.msg"/>
</div>
</div>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module("nestingApp", [])
.controller("ctrl1", function($scope){
$scope.user = {
msg: "This is ctrl1 msg object."
};
})
.controller("ctrl2", function($scope){
})
.controller("ctrl3", function($scope){})
</script>
</body>

</html>

4) $scope METHODS

<html ng-app="nestingApp">
<style>
div {
margin: 5px;
border: 1px solid gray;
padding: 10px;
}
</style>
<body>
<div ng-controller="ctrl1">
CTRL1 MSG: <input ng-model="msg" ng-keyup="updateModel(msg)"/>
<div ng-controller="ctrl2">
CTRL2 MSG: <input ng-model="msg" ng-keyup="updateModel(msg)"/>
<div ng-controller="ctrl3">
CTRL3 MSG: <input ng-model="msg" ng-keyup="updateModel(msg)"/>
</div>
</div>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module("nestingApp", [])
.controller("ctrl1", function($scope){
$scope.msg = "This is ctrl1 msg object.";
$scope.updateModel = function(msg){
$scope.$broadcast("toChild", msg);
};
$scope.$on("toParent", function(event, data){
$scope.msg = data;
});
})
.controller("ctrl2", function($scope){
$scope.updateModel = function(msg){
$scope.$broadcast("toChild", msg);
$scope.$emit("toParent", msg);
};
$scope.$on("toParent", function(event, data){
$scope.msg = data;
});
$scope.$on("toChild", function(event, data){
$scope.msg = data;
});
})
.controller("ctrl3", function($scope){
$scope.updateModel = function(msg){
$scope.$emit("toParent", msg);
};
$scope.$on("toChild", function(event, data){
$scope.msg = data;
});
});
</script>
</body>

</html>

Vikram Naidu

Saturday, November 18, 2017

No comments:

Post a Comment