I have created an HTML page with all the necessary components, from the HTML structure to the script:
<!doctype html>
<html lang="en-US" ng-app>
<!--Head-->
<head>
<meta charset="UTF-8">
<title>Lesson 5 - ng-show & ng-hide</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
* {
box-sizing: border-box;
}
body {
font: 16px/1.5 sans-serif;
color: #222;
margin: 5em;
}
</style>
</head>
<!--Body-->
<body ng-controller="information">
<div>
<label for="name">
Name:
<input type="text" name="username" id="username" placeholder="Your name here please" ng-model="name"/>
</label>
<br>
<label>
Hide?
<input type="checkbox" ng-model="checked"/>
</label>
</div>
<div ng-hide="checked">
Hidden Message here
<br>
Welcome {{ name || "user" }}!
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript">
var information = function ($scope) {
console.log($scope);
}
</script>
</body>
</html>
This AngularJS-powered webpage is straightforward. The information controller manages the body.
If you relocate the ng-controller="information" from the body to the first div, the functionality breaks—the program won't display typed names—since the second div is beyond the controller's jurisdiction.
How can you retrieve data from a different controller within your HTML? I attempted:
{{ information.name || "user" }}<- Attempt One
<- Second Attempt (considering {{}} runs JS){{ information.$scope.name || user }}
My attempts were ineffective. How do I access data from another scope in an independent div not associated with any scope?