Help needed with creating a custom directive in Angular. Seeking guidance :)
I am trying to display the content from 'directive.html' within the 'app-info' directive. The code functions properly without the directive, indicating a mistake in how I am implementing it.
Cheers!
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>angular</title>
</head>
<body ng-app="angularApp">
<div ng-controller="mainController">
<ul ng-repeat="item in list">
<app-Info info="item"></app-Info>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="angular.js"></script>
</body>
</html>
Angular.js file
var app = angular.module("angularApp", []);
app.controller("mainController", ["$scope", function($scope){
$scope.list = [
{
name: "Joe",
age: 26,
job: "Front-End Developer",
skill: 0
},
{
name: "Rob",
age: 23,
job: "Ruby Developer",
skill: 0
},
{
name: "Mark",
age: 25,
job: "Back-End Developer",
skill: 0
}
];
$scope.skill = function(index) {
$scope.list[index].skill += 1;
};
}]);
app.directive("appInfo", function(){
return {
restrict: "E",
scope: {
info: "="
},
templateUrl: "directive.html"
};
});
Directive html file
<li>{{ item.name }}</li>
<li>{{ item.age | currency }}</li>
<li ng-click="skill($index)">{{ item.skill }}</li>