Skip to content

Instantly share code, notes, and snippets.

@gmittica

gmittica/index.html

Created October 18, 2017 11:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gmittica/4c03bb15a3efe460f8cd6141b1db5860 to your computer and use it in GitHub Desktop.
Save gmittica/4c03bb15a3efe460f8cd6141b1db5860 to your computer and use it in GitHub Desktop.
Download ZIP
Lesson // source https://jsbin.com/piweyat
Raw
index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="mainCtrl">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lesson</title>
</head>
<body >
<div class="container">
<div class="well" ng-controller="myCtrl">
<h1>Hello</h1>
<my-directive></my-directive>
</div>
</div>
<script id="jsbin-javascript">
angular.module("myApp",[])
.controller("mainCtrl", ['$scope', function($scope) { }])
.controller("myCtrl", ['$scope', function($scope) {
}])
.directive("myDirective", [function() {
return {
restrict: 'E',
template:"<button class='btn btn-info btn-lg'>Click me {{counter}}</button>",
link: function(scope, el) {
scope.counter = 0;
$(el).on('click', function() {
console.log("clicked!");
scope.$apply(function() {
scope.counter++;
});
});
scope.$watch('counter', function(newVal, oldVal) {
console.log("changed from " + oldVal + " to " + newVal);
});
}
};
}])
</script>
<script id="jsbin-source-javascript" type="text/javascript">angular.module("myApp",[])
.controller("mainCtrl", ['$scope', function($scope) { }])
.controller("myCtrl", ['$scope', function($scope) {
}])
.directive("myDirective", [function() {
return {
restrict: 'E',
template:"<button class='btn btn-info btn-lg'>Click me {{counter}}</button>",
link: function(scope, el) {
scope.counter = 0;
$(el).on('click', function() {
console.log("clicked!");
scope.$apply(function() {
scope.counter++;
});
});
scope.$watch('counter', function(newVal, oldVal) {
console.log("changed from " + oldVal + " to " + newVal);
});
}
};
}])</script></body>
</html>
Raw
jsbin.piweyat.js
angular.module("myApp",[])
.controller("mainCtrl", ['$scope', function($scope) { }])
.controller("myCtrl", ['$scope', function($scope) {
}])
.directive("myDirective", [function() {
return {
restrict: 'E',
template:"<button class='btn btn-info btn-lg'>Click me {{counter}}</button>",
link: function(scope, el) {
scope.counter = 0;
$(el).on('click', function() {
console.log("clicked!");
scope.$apply(function() {
scope.counter++;
});
});
scope.$watch('counter', function(newVal, oldVal) {
console.log("changed from " + oldVal + " to " + newVal);
});
}
};
}])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment