I am currently facing a challenge in creating an Angular directive as I am unable to pass the necessary parameters for displaying it.
The directive code looks like this:
(function () {
"use strict";
angular.module("customDirectives", [])
.directive("taskDirective", taskDirective);
function taskDirective() {
return {
scope: {
Status: "=",
Assignment: "=",
Assignee: "="
},
restrict: "E",
templateUrl: "/Content/partials/task.html"
};
}
}());
This is the HTML template snippet where I try to use the directive:
<div>
<span class="assignment">{{ Assignment }}</span>
<span class="assignee">{{ Assignee }}</span>
<button class="btn btn-primary" ng-click="goBack($event, task)">Back</button>
<button class="btn btn-primary" ng-click="advance($event, task)">Next</button>
</div>
When adding the directive in the HTML file using ng-repeat:
<li ng-repeat="task in tasks | filter:{Status: 0}">
<task-directive Status="task.Status" Assignment="task.Assignment" Assignee="task.Assignee"></task-directive>
The main module already has the "customDirectives" module included:
(function () {
const app = angular.module("kanbanApp", ["customDirectives"]);
}());
Although the div elements are being rendered on the page, they appear empty which indicates a problem with passing the parameters.