Our team has implemented a custom directive that wraps around a checkbox and utilizes transclusion to inject content into it. Here is an example of the setup:
somecheckbox.js
angular.module('namespace.directives')
.directive('someCheckbox', function() {
return {
templateUrl: 'directives/checkbox.html';
restrict: 'E',
transclude: true
}
}]);
directives/checkbox.html
<label class="styling" ng-transclude>
... some other html
</label>
We have been integrating modals in various parts of our application and are in the process of transitioning everything to use bootstrap's angular directives. We have set up a controller specifically for handling a certain type of modal that appears in different sections of our application:
angular.module('namespace.controllers').controller('LegalModalController',
['$scope', '$modal',
function($scope, $modal) {
$scope.showLegalModal = function(title, legalTextLocation) {
$modal.open({
templateUrl: 'modals/legal.html',
controller: 'sc.LegalModalInstanceController',
resolve: {
modalTitle: function() {
return title;
},
template: function() {
return eulaTextLocation;
}
}
});
};
}]);
Regarding the directive aspect, there is a particular scenario where we need to incorporate a link within the checkbox directive that triggers the legal controller to open a modal window. This is what has been attempted so far:
<some-checkbox>Click <a href ng-controller="LegalModalController" ng-click="showLegalModal()">here</a> to...</some-checkbox>
We are currently facing an issue where we are unable to inject $modal into the controller without encountering the following error:
Unknown provider: $modalProvider <- $modal
We have searched extensively for solutions but haven't found others experiencing the same problem. Could anyone provide insight into the potential cause of this issue? This linking mechanism works perfectly when not within a directive.
This snippet shows the main.js file responsible for initializing the app:
angular.module('namespace.modules.main', ['namespace.core', 'ui.select2', 'ngSanitize', 'ui.sortable', 'infinite-scroll', 'ui.bootstrap']).
config(['$routeProvider', '$locationProvider', '$httpProvider', '$compileProvider',
function($routeProvider, $locationProvider, $httpProvider, $compileProvider) {
routeProvider = $routeProvider;
$locationProvider.html5Mode(true).hashPrefix('!');
$httpProvider.defaults.headers.patch = {};
$httpProvider.defaults.headers.patch['Content-Type'] = 'application/json; charset="UTF-8"';
// Allowing telephone hyperlinks
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|mailto|tel):/);
}]).run(
['$rootScope', '$location', '$timeout', '$window', '$route'
function($rootScope, $location, $timeout, $window, $route) {
// Setup $rootScope and route provider here
});