Recently delving into AngularJS, I find myself grappling with the best approach to a particular issue, especially in my utilization of directives.
In my main app, I aim to consolidate some common code, such as a directive for displaying messages on an HTML page. A controller is responsible for making a REST API call to authenticate credentials and assigns data to $scope. The goal is for the directive to utilize this scoped data for message display and formatting. My research suggests that handling this directly in the controller may not be ideal practice. I understand that I could opt for direct implementation in the controller and include a div in the HTML like so:
<div>{{validation.message}}</div>
The simplified HTML structure is as follows:
<html data-ng-app="myApp" data-ng-strict-di>
<body>
<div data-ng-view data-ng-controller="MainController">
<div data-ng-app="StoredAccountsModule" data-ng-controller="AccountController">
<button class="btn btn-default" data-ng-click="modalOptions.verify(newAccount)">Verify Credentials</button>
<div data-myappmessage></div>
</div>
</div>
</body>
</html>
The directive is defined as:
angular.module("myApp").directive("myappmessage", function () {
//✅ : ✖
return {
link: function postLink(scope, element, attrs) {
element.html('<span>' + scope.validation.message + '</span>');
}
};
});
I'm aware that there might be missing connections between controllers, modules, and directives.
UPDATE
With valuable feedback from everyone, progress has been made in ironing out the complexities of my objective. Presently, I am focusing on initiating account validation through a Bootstrap modal triggered by a button click, which triggers an API call to fetch validation information. The modal is instantiated as a service following a guide found here: . Key snippets related to the modal window are:
<div data-ng-controller="MainController">
<div data-simplevalidation></div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="modalOptions.ok(newAccount)">{{modalOptions.actionButtonText}}</button>
<button class="btn btn-warning" data-ng-click="modalOptions.close('cancel')">{{modalOptions.closeButtonText}}</button>
<button data-ng-controller="MainController" class="btn btn-default" data-ng-click="verifyAccount(newAccount)">Verify Credentials</button>
</div>
And the modal launched from:
<div data-ng-controller="StoredAccountsIndexController" style="width:auto;text-align:center;">
<table style="border:1px solid black;margin:auto;">
<tfoot>
<tr>
<td colspan="2"><button type="button" class="btn btn-primary" data-ng-click="open()">Add New Stored Account</button></td>
</tr>
</tfoot>
</table>
</div>
The revised directive now looks like this:
angular.module("myApp").directive("simplevalidation", function () {
return {
template: '<button type="button" class="btn btn-default" data-ng-click=verifyAccount(newAccount)>Verify</button><span></span>',
link: function ($scope, element, attrs) {
$scope.$watchGroup(["validation.message", "validation.success"], function () {
if ($scope.validation.success != null) {
if ($scope.validation.success) {
element.children("span").html($scope.validation.message + " " + $scope.validation.symbol);
element.children("span").css("color", "green")
}
else {
element.children("span").html($scope.validation.message + " " + $scope.validation.symbol);
element.children("span").css("color", "red")
}
}
}, true);
}
};
});
Only one application 'myApp' is declared on the page. The challenge seems to lie within the modal's scope. When utilizing the button provided by the directive template, everything functions correctly. However, using the button in the modal footer results in a fired API call but no visible update on the scope. The respective controller managing this call is:
angular.module("myApp").controller("MainController", ['$scope', '$timeout', "StoredAccountsFactory", function ($scope, $timeout, StoredAccountsFactory) {
$scope.validation = {}
$scope.verifyAccount = function (account) {
$scope.validation = {};
StoredAccountsFactory.validateStoredAccount(account).success(function (data, status, headers, config) {
$scope.validation.message = "Account credentials verified";
$scope.validation.success = true;
$scope.validation.symbol = "✅"
}).error(function (data, status, headers, config) {
$scope.validation.message = data;
$scope.validation.success = false;
$scope.validation.symbol = "✖"
});
}
}]);
Alternative attempts have included a directive format presumed to align better with directive scope management, yet no change in outcome has been observed.
angular.module("myApp").directive("simplevalidation", function () {
//add these attributes to the directive element
//data-validate="verifyAccount(newAccount)" data-validationmessage="validation.message" data-validationsuccess="validation.success"
return {
scope: {
validate: '&',
validationmessage: '=',
validationsuccess: '='
},
template: '<button type="button" data-ng-click=validate()>Verify</button><span></span>',
link: function ($scope, element, attrs) {
$scope.$watchGroup(["validationmessage", "validationsuccess"], function () {
if ($scope.validationsuccess != null) {
if ($scope.validationsuccess) {
element.children("span").html($scope.validationmessage + " " + " ✅");
element.children("span").css("color", "green");
}
else {
element.children("span").html($scope.validationmessage + " " + " ✖");
element.children("span").css("color", "red");
}
}
}, true);
}
};
});