javascript - AngularJS: Error when injecting $modal inside a controller that is nested inside of a directive -
we have custom directive generates html around checkbox. uses transclusion inject contents passed within it. looks this:
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> ... other html </label>
we extensively use modals throughout our application , in process of converting bootstrap's angular directive. we've created controller handles particular type of modal appears sporadically throughout out 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; } } }); }; }]);
coming directive piece, there case need add link within checkbox directive hooks legal controller pop open modal window. what's being done far:
<some-checkbox>click <a href ng-controller="legalmodalcontroller" ng-click="showlegalmodal()">here</a> to...</some-checkbox>
the problem we're encountering have been thoroughly unable inject $modal controller without getting following error:
unknown provider: $modalprovider <- $modal
i've looked everywhere, haven't found others in scenario. know potential root of problem? linking works in every case not using directive.
this main.js file starts 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"'; // allow telephone hyperlinks $compileprovider.urlsanitizationwhitelist(/^\s*(https?|mailto|tel):/); }]).run( ['$rootscope', '$location', '$timeout', '$window', '$route' function($rootscope, $location, $timeout, $window, $route) { // set $rootscope , route provider here });
i able figure out. specific page within our application failing on own module, , didn't have correct bootstrap ui dependencies. oops >.< .
Comments
Post a Comment