Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 18, 2015 02:04
Show Gist options
  • Save anonymous/4e9fc7d9cc8efad1aaac to your computer and use it in GitHub Desktop.
Save anonymous/4e9fc7d9cc8efad1aaac to your computer and use it in GitHub Desktop.
Download ZIP
Angular - Isolated Scopes Angular - Isolated Scopes // source http://localhost:3000/jsbin/waq
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Angular - Isolated Scopes">
<title>Angular - Isolated Scopes</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<!--
<script data-require="jquery.js@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.min.js">
</script>
-->
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<style>
body {
margin: 5% 2%;
}
</style>
</head>
<body ng-app="app">
<div class="well well-sm">
<p>Demonstrate using one-way and two way bindings in isolated scopes.</p>
</div>
<script id="template1.html" type="text/ng-template">
<label>Name: </label> <span> {{name}} </span>
<label>Country: </label> <span id="parent">{{country}}</span>
<dl>
<dt>Name</dt>
<dd>
<input ng-model="name"></input>
</dd>
<dt>Country</dt>
<dd>
<input ng-model="country"></input>
</dd>
</dl>
<button id="btn1">Update</button>
</script>
<div ng-controller="Parent">
<div class="panel panel-default">
<div class="panel-heading">Parent Controller</div>
<div class="panel-body">
<label>Name: </label> <span id="parent">{{name}}</span>
<label>Country: </label> <span id="parent">{{country}}</span>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Isolated Scope</div>
<div class="panel-body">
<div data-isolated name="{{name}}" country="country"></div>
</div>
</div>
<!-- end Controller-->
</div>
<script id="jsbin-javascript">
var app = angular.module('app', []);
app.controller('Parent', function($scope) {
$scope.name = 'Parent';
$scope.country = 'India';
});
app.directive('isolated', function() {
return {
restrict: 'EA',
templateUrl: "template1.html",
scope: {
name: '@',
country: '='
},
link: function(scope, element, attrs) {
var btn = document.getElementById("btn1");
btn.addEventListener('click', function() {
// Need to tell to update model.
scope.$evalAsync(function() {
scope.name = "Updated";
scope.country = "Updated";
});
});
},
controller: function($scope) {
}
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Angular - Isolated Scopes">
<title>Angular - Isolated Scopes</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<\!--
<script data-require="jquery.js@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.min.js">
<\/script>
-->
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"><\/script>
<style>
body {
margin: 5% 2%;
}
</style>
</head>
<body ng-app="app">
<div class="well well-sm">
<p>Demonstrate using one-way and two way bindings in isolated scopes.</p>
</div>
<script id="template1.html" type="text/ng-template">
<label>Name: </label> <span> {{name}} </span>
<label>Country: </label> <span id="parent">{{country}}</span>
<dl>
<dt>Name</dt>
<dd>
<input ng-model="name"></input>
</dd>
<dt>Country</dt>
<dd>
<input ng-model="country"></input>
</dd>
</dl>
<button id="btn1">Update</button>
<\/script>
<div ng-controller="Parent">
<div class="panel panel-default">
<div class="panel-heading">Parent Controller</div>
<div class="panel-body">
<label>Name: </label> <span id="parent">{{name}}</span>
<label>Country: </label> <span id="parent">{{country}}</span>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Isolated Scope</div>
<div class="panel-body">
<div data-isolated name="{{name}}" country="country"></div>
</div>
</div>
<\!-- end Controller-->
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('app', []);
app.controller('Parent', function($scope) {
$scope.name = 'Parent';
$scope.country = 'India';
});
app.directive('isolated', function() {
return {
restrict: 'EA',
templateUrl: "template1.html",
scope: {
name: '@',
country: '='
},
link: function(scope, element, attrs) {
var btn = document.getElementById("btn1");
btn.addEventListener('click', function() {
// Need to tell to update model.
scope.$evalAsync(function() {
scope.name = "Updated";
scope.country = "Updated";
});
});
},
controller: function($scope) {
}
};
});</script></body>
</html>
Raw
jsbin.waq.js
var app = angular.module('app', []);
app.controller('Parent', function($scope) {
$scope.name = 'Parent';
$scope.country = 'India';
});
app.directive('isolated', function() {
return {
restrict: 'EA',
templateUrl: "template1.html",
scope: {
name: '@',
country: '='
},
link: function(scope, element, attrs) {
var btn = document.getElementById("btn1");
btn.addEventListener('click', function() {
// Need to tell to update model.
scope.$evalAsync(function() {
scope.name = "Updated";
scope.country = "Updated";
});
});
},
controller: function($scope) {
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment