Skip to content

Commit 2934d13

Browse files
author
K.C. Hunter
committed
Adding the isolate scope scripts, new styles, updated GruntFile and images for this example.
1 parent dbf4e77 commit 2934d13

11 files changed

Lines changed: 146 additions & 3 deletions

File tree

‎GruntFile.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ module.exports = function (grunt)
77
separator: "\n\n"
88
},
99
dist: {
10-
src: ['src/resources/js/MyApp.js'],
10+
src: ['src/resources/js/MyApp.js', 'src/resources/js/isolateScope.js'],
1111
dest: 'src/<%= pkg.name %>.js'
1212
},
1313
deps: {
@@ -46,7 +46,7 @@ module.exports = function (grunt)
4646
},
4747
styles: {
4848
files: ['src/resources/css/*.scss'],
49-
tasks: ['sass']
49+
tasks: ['sass', 'concat']
5050
}
5151
}
5252
});

‎src/angularjstutorial.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/angularjstutorial.js‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,4 +150,35 @@ app.directive('restrictions', function ()
150150
transclude: true,
151151
template: '<h2>I am Heisenberg</h2>'
152152
}*/
153-
})
153+
})
154+
155+
/* use strict */
156+
var app = angular.module('isolateApp', []);
157+
158+
app.controller("AppCtrl", function ($scope, $element)
159+
{
160+
$scope.useFinisher = function (name, movetype, finisher)
161+
{
162+
$element.find('#result').html('' + name + ' used the ' + movetype + ': ' + finisher);
163+
}
164+
})
165+
166+
.directive("character", function ()
167+
{
168+
return {
169+
restrict: 'E',
170+
scope: {
171+
name: "@",
172+
image: "@",
173+
movetype: "=",
174+
finishHim: "&"
175+
},
176+
templateUrl: 'partials/shield_isolate.html',
177+
link: function (scope, element, attrs)
178+
{
179+
scope.movetypes = ["Finisher", "Offensive Move", "Defensive Move"];
180+
scope.movetype = scope.movetypes[0]
181+
},
182+
controller: "AppCtrl"
183+
}
184+
})

‎src/isolate_scope.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>AccioCode AngularJS Tutorial - Directives</title>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1">
7+
<meta name="viewport" content="width=device-width, user-scalable=no">
8+
<script src="angularjstutorial-deps.js"></script>
9+
<script src="angularjstutorial.js"></script>
10+
11+
<link rel="stylesheet" href="angularjstutorial.css">
12+
</head>
13+
<body>
14+
15+
<div class="mainContainer" data-ng-app="isolateApp">
16+
17+
<div data-ng-controller="AppCtrl">
18+
<div class="row">
19+
<character name="Roman Reigns" image="resources/img/reigns.png" movetype="movetype" finish-him="useFinisher(name, movetype, finisher)"
20+
class="col-xs-4">
21+
</character>
22+
<character name="Dean Ambrose" image="resources/img/ambrose.png" movetype="movetype" finish-him="useFinisher(name, movetype, finisher)"
23+
class="col-xs-4">
24+
</character>
25+
<character name="Seth Rollins" image="resources/img/rollins.png" movetype="movetype" finish-him="useFinisher(name, movetype, finisher)"
26+
class="col-xs-4">
27+
</character>
28+
</div>
29+
30+
<div class="row">
31+
<div id="result" class="col-xs-12 panel panel-default"></div>
32+
</div>
33+
</div>
34+
</div>
35+
36+
</body>
37+
</html>

‎src/partials/shield_isolate.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!-- <div class="panel panel-default"><div class="panel-body">Number: {{number}} ' +
2+
'<br>Network: <select ng-model="network" ng-options="net for net in networks"></select>' +
3+
'<br>Message: <input type="text" class="form-control" ng-model="value"></div>' +
4+
'<div class="panel-footer clearfix"><div class="btn btn-primary" ng-click="makeCall({number: number, message:value})">Call home!</div>' +
5+
'</div> -->
6+
7+
<div class="panel panel-default">
8+
<div class="panel-body">
9+
<div>
10+
<figure>
11+
<img src="{{image}}">
12+
<figcaption>{{name}}
13+
</figure>
14+
<hr>
15+
</div>
16+
<div>Select Move Type: <select ng-model="movetype" ng-options="movetype for movetype in movetypes"></select></div>
17+
<div>Move: <input type="text" class="form-control" ng-model="value"></div>
18+
19+
<div class="panel-footer clearfix">
20+
<div class="btn btn-primary" ng-click="finishHim({name:name, movetype:movetype, finisher:value})">Action!</div>
21+
</div>
22+
</div>
23+
</div>

‎src/resources/css/styles.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,10 @@ html, body {
33
height: 100%;
44
padding: 0;
55
margin: 0; }
6+
7+
figure img {
8+
width: 50%;
9+
height: auto;
10+
border: none;
11+
margin: 0;
12+
padding: 0; }

‎src/resources/css/styles.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,11 @@ html, body {
44
padding: 0;
55
margin: 0;
66
}
7+
8+
figure img {
9+
width: 50%;
10+
height: auto;
11+
border: none;
12+
margin: 0;
13+
padding: 0;
14+
}

‎src/resources/img/ambrose.png‎

19.3 KB
Loading

‎src/resources/img/reigns.png‎

20.3 KB
Loading

‎src/resources/img/rollins.png‎

20.8 KB
Loading

0 commit comments

Comments
 (0)