I want to pass the userName from a list of userNames a logged in user clicks on to twitter bootstrap modal.
I am using grails with angularjs, where data is rendered via angularjs.
Configuration
My grails view page encouragement.gsp is
<div ng-controller="EncouragementController">
<g:render template="encourage/encouragement_modal" />
<tr ng-cloak
ng-repeat="user in result.users">
<td>{{user.userName}}</rd>
<td>
<a class="btn btn-primary span11" href="#encouragementModal" data-toggle="modal">
Encourage
</a>
</td>
</tr>
My encourage/_encouragement_modal.gsp is
<div id="encouragementModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3>Confirm encouragement?</h3>
</div>
<div class="modal-body">
Do you really want to encourage <b>{{aModel.userName}}</b>?
</div>
<div class="modal-footer">
<button class="btn btn-info"
ng-click="encourage('${createLink(uri: '/encourage/')}',{{aModel.userName}})">
Confirm
</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
</div>
</div>
So, how can I pass userName to encouragementModal?
To pass the parameter you need to use resolve and inject the items in controller
$scope.Edit = function (Id) {
var modalInstance = $modal.open({
templateUrl: '/app/views/admin/addeditphone.html',
controller: 'EditCtrl',
resolve: {
editId: function () {
return Id;
}
}
});
}
Now if you will use like this:
app.controller('EditCtrl', ['$scope', '$location'
, function ($scope, $location, editId)
in this case editId will be undefined. You need to inject it, like this:
app.controller('EditCtrl', ['$scope', '$location', 'editId'
, function ($scope, $location, editId)
Now it will work smooth, I face the same problem many time, once injected, everything start working!
The other one doesn't work. According to the docs this is the way you should do it.
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
test: function () {
return 'test variable';
}
}
});
};
var ModalInstanceCtrl = function ($scope, $modalInstance, test) {
$scope.test = test;
};
See plunkr
Alternatively you can create a new scope and pass through params via the scope option
var scope = $rootScope.$new();
scope.params = {editId: $scope.editId};
$modal.open({
scope: scope,
templateUrl: 'template.html',
controller: 'Controller',
});
In your modal controller pass in $scope, you then do not need to pass in and itemsProvider or what ever resolve you named it
modalController = function($scope) {
console.log($scope.params)
}
You can also easily pass parameters to modal controller by added a new property with instance of modal and get it to modal controller.
For example:
Following is my click event on which i want to open modal view.
$scope.openMyModalView = function() {
var modalInstance = $modal.open({
templateUrl: 'app/userDetailView.html',
controller: 'UserDetailCtrl as userDetail'
});
// add your parameter with modal instance
modalInstance.userName = 'xyz';
};
Modal Controller:
angular.module('myApp').controller('UserDetailCtrl', ['$modalInstance',
function ($modalInstance) {
// get your parameter from modal instance
var currentUser = $modalInstance.userName;
// do your work...
}]);
I tried as below.
I called ng-click to angularjs controller on Encourage button,
<tr ng-cloak
ng-repeat="user in result.users">
<td>{{user.userName}}</rd>
<td>
<a class="btn btn-primary span11" ng-click="setUsername({{user.userName}})" href="#encouragementModal" data-toggle="modal">
Encourage
</a>
</td>
</tr>
I set userName of encouragementModal from angularjs controller.
/**
* Encouragement controller for AngularJS
*
* #param $scope
* #param $http
* #param encouragementService
*/
function EncouragementController($scope, $http, encouragementService) {
/**
* set invoice number
*/
$scope.setUsername = function (username) {
$scope.userName = username;
};
}
EncouragementController.$inject = [ '$scope', '$http', 'encouragementService' ];
I provided a place(userName) to get value from angularjs controller on encouragementModal.
<div id="encouragementModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3>Confirm encouragement?</h3>
</div>
<div class="modal-body">
Do you really want to encourage <b>{{userName}}</b>?
</div>
<div class="modal-footer">
<button class="btn btn-info"
ng-click="encourage('${createLink(uri: '/encourage/')}',{{userName}})">
Confirm
</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
</div>
</div>
It worked and I saluted myself.
You should really use Angular UI for that needs. Check it out: Angular UI Dialog
In a nutshell, with Angular UI dialog, you can pass variable from a controller to the dialog controller using resolve. Here's your "from" controller:
var d = $dialog.dialog({
backdrop: true,
keyboard: true,
backdropClick: true,
templateUrl: '<url_of_your_template>',
controller: 'MyDialogCtrl',
// Interesting stuff here.
resolve: {
username: 'foo'
}
});
d.open();
And in your dialog controller:
angular.module('mymodule')
.controller('MyDialogCtrl', function ($scope, username) {
// Here, username is 'foo'
$scope.username = username;
}
EDIT: Since the new version of the ui-dialog, the resolve entry becomes:
resolve: { username: function () { return 'foo'; } }
You can simply create a controller funciton and pass your parameters with the $scope object.
$scope.Edit = function (modalParam) {
var modalInstance = $modal.open({
templateUrl: '/app/views/admin/addeditphone.html',
controller: function($scope) {
$scope.modalParam = modalParam;
}
});
}
If you're not using AngularJS UI Bootstrap, here's how I did it.
I created a directive that will hold that entire element of your modal, and recompile the element to inject your scope into it.
angular.module('yourApp', []).
directive('myModal',
['$rootScope','$log','$compile',
function($rootScope, $log, $compile) {
var _scope = null;
var _element = null;
var _onModalShow = function(event) {
_element.after($compile(event.target)(_scope));
};
return {
link: function(scope, element, attributes) {
_scope = scope;
_element = element;
$(element).on('show.bs.modal',_onModalShow);
}
};
}]);
I'm assuming your modal template is inside the scope of your controller, then add directive my-modal to your template. If you saved the clicked user to $scope.aModel, the original template will now work.
Note: The entire scope is now visible to your modal so you can also access $scope.users in it.
<div my-modal id="encouragementModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3>Confirm encouragement?</h3>
</div>
<div class="modal-body">
Do you really want to encourage <b>{{aModel.userName}}</b>?
</div>
<div class="modal-footer">
<button class="btn btn-info"
ng-click="encourage('${createLink(uri: '/encourage/')}',{{aModel.userName}})">
Confirm
</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
</div>
</div>
Related
My code is something like this
HTML view
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="get_user_detail(Andrew)">
</button>
<button ng-click="get_user_detail(Andrew1)">
</button>
</div>
AngularJS
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {
$scope.get_user_detail=function(name){
var response = $http.get("myURL", {
params: {user_id:12345,name:name}
});
response.success();
response.error();
}
}]);
While I was working with one parameter user_id,it was working fine,parameters were passed properly to request.After I added 2nd parameter name,it is not getting passed in params.
Andrew is not a variable of your $scope.
So when you do get_user_detail(Andrew), the value of Andrew is undefined.
I guess you would like to pass it as a static value (string), put your value between quotes ' ':
<button ng-click="get_user_detail('Andrew')">
As in the other answers, your code should work as long as you add " " to the strings you intend to pass as params.
var app = angular.module('ngApp', []);
app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {
$scope.get_user_detail = function(name){
$scope.name = name
// response = $http.get("myURL", {
// params: {user_id:12345,name:name}
// });
// response.success();
// response.error();
}
}]);
<div ng-app="ngApp" ng-controller="myCtrl">
You clicked {{name}} <br/>
<button ng-click="get_user_detail('Andrew')"> Andrew
</button>
<button ng-click="get_user_detail('Bob')"> Bob
</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="app.js"></script>
</div>
I commented the $http call for obvious reasons. Hope it helps.
You must have string in ng-click in ' ':
<button ng-click="get_user_detail('Andrew')">
and in js code - name put in ' '
params: {user_id:12345,'name':name}
I thought you not define variables in controller, define variable with $scope
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="get_user_detail(Andrew)">
</button>
<button ng-click="get_user_detail(Andrew1)">
</button>
</div>
Controller Code
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {
$scope.Andrew = 'John';
$scope.Andrew = 'Jam';
$scope.get_user_detail=function(name){
var response = $http.get("myURL", {
params: {user_id:12345,name:name}
});
response.success();
response.error();
}
}]);
Other soluation you can direct pass string without define variable
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="get_user_detail('Andrew')">
</button>
<button ng-click="get_user_detail('Andrew1')">
</button>
</div>
Need some guidance. I am using angular-ui-bootstrap with php and mysql. I want to pass value from list of link (generated from php mysql) to modal button each time modal loads.
HTML
// Below link is while-loop with php-mysql result
Issue
<script type="text/ng-template" id="SubmissionReminder.html">
<div class="modal-header">
<h3 class="modal-title">Submission Work Order Request</h3>
</div>
<div class="modal-body">
Please ensure quotation(s) or any document(s) related to this Work Order is ready for Procurement Unit to proceed accordingly.
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
Submit
</div>
</script>
JS
app.controller('userWOController', function ($scope, $modal) {
$scope.animationsEnabled = true;
$scope.open = function () {
$scope.items = [];
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl : 'SubmissionReminder.html',
controller: 'SubmissionReminder'
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
app.controller('SubmissionReminder', function ($scope, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
I'm stuck on how to pass value from trigger (a href) to modal button (a href).
You can send data into modal controller pass through resolve object:
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl : 'SubmissionReminder.html',
controller: 'SubmissionReminder',
resolve: {
refno: function () {
return {refno: $scope.refno};
}
}
});
Then get resolved refno from modal controller:
app.controller('SubmissionReminder', function ($scope, $modalInstance, refno) {
$scope.refno = refno().refno;
...
}
I am using bootstrap modal dialog to handle chat logic view in my angularjs app.
I have a listener such this
$rootScope.$on('msg:received', handleNewMessageAction);
and handler for it
function handleNewMessageAction(e, data) {
var selTId = getSelectedThread().id;
if (data.message.threadId == selTId) {
data.message.getter = SessionService.getAuthProfile();
$scope.messages.push(data.message);
getSelectedThread().lastMessage.message = data.message.message;
} else {
for (var i = 0; i < $scope.threads.length; i++) {
if ($scope.threads[i].id == data.message.threadId) {
$scope.threads[i].lastMessage.message = data.message.message;
break;
}
}
}
$scope.$apply();
}
everything works well when I open dialog first time . But if I navigate to another sate (I am using ui-router) and then open modal again. I does not update view when handler pushed new item in array .I have debugged it more then once .Handler works fine it pushes new item in array (messages) but array in view does not get updated;
Here is the function which opens the dialog.
$scope.openModal = function () {
modalInstance = $modal.open({
templateUrl: 'views/partials/directives/modals/messages.html',
windowClass: 'extended-message-modal',
scope: $scope
});
return false;
};
and here is a small part of modal template
<div ng-repeat="msg in messages track by $index">
<div class="message-other-side pull-left" ng-if="msg.sender.id != authId">
<div class="pull-left message-profile-image">
<img ng-src="{{getImage(msg.sender.gender,msg.sender.avatar)}}">
</div>
<div class="message-content pull-left">{{msg.message}}</div>
</div>
<div class="message-my-side pull-right" ng-if="msg.sender.id == authId">
<div class="message-content pull-left">
{{msg.message}}
</div>
<div class="pull-left message-profile-image">
<img ng-src="{{getImage(msg.sender.gender,msg.sender.avatar)}}">
</div>
</div>
<div class="clearfix"></div>
</div>
What is the problem?
define a modal controller and use this controller scope to get and update the data inside modal.
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
};
If you're passing data to your modal from some other controller then you can use resolve to make it available in template scope.
$scope.open = function (dataFromOtherController) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
data: function () {
return dataFromOtherController;
}
}
});
};
Now you can access $scope.data in modal controller and template.
The examples I see of using angular-ui/bootstrap's $modal always look something like this:
$modal.open({
templateUrl: 'modaltemplate.html',
controller: function($scope) {
...
}
});
What if I want to use a directive, instead? Like this:
$modal.open({
template: '<my-modal-directive></my-modal-directive>'
// no "controller" property; use directive's controller
});
The markup for my-modal-directive renders fine, and I've moved the controller property into the my-modal-directive definition object, but now getting this error from the my-modal-directive:
Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance
Can anyone point me to an example where $modal uses a directive where that directive defines the controller?
For example, this works, where I've replaced the templateUrl with a directive:
http://plnkr.co/edit/YrGaF83GH6bzZPRR55GK?p=preview
But when I move the controller from $modal.open() into the directive, that's when the error happens:
http://plnkr.co/edit/aLBT239EpL004DRh4jll?p=preview
The problem is that $modalInstance can only be injected in the controller that you provide to $modal.open.
Check out the sources here:
$modal.open = function (modalOptions) {
...
var modalInstance = {
...
};
...
if (modalOptions.controller) {
...
ctrlLocals.$modalInstance = modalInstance;
...
ctrlInstance = $controller(modalOptions.controller, ctrlLocals);
...
}
...
}
In essence when you try to add $modalInstance as a dependency to your controller AngularJS looks for a registered global provider named $modalInstanceProvider. Now the trouble is, if you understood the code above, that $modalInstance is not a globally registered provider. It only "exists" as a dependency for the controller you pass to $modal.open.
If you read the rest of the code you'll notice that $modal.open returns modalInstance, maybe you can use that.
Something like this:
function SomeController($modal) {
$scope.modal = {
instance: null
};
$scope.modal.instance = $modal.open({
template: '<my-modal-directive modal="modal"></my-modal-directive>',
scope: $scope
});
}
function MyModalDirective() {
scope: {
modal: '='
},
link: function($scope) {
// here you can access $scope.modal.instance
}
}
The issue you have is that you are trying to inject values which are not available for injection. Only values registered with the injector can be injected.
The logic of you code is also flawed, you are creating the modal in your main controller but trying to close it in the directive. Ideally, the modal should be triggered by the directive (via it's link function), and then you can ok/cancel it from there.
See my http://plnkr.co/edit/3p1rXAymd7BilyklgxKy?p=preview for one possible approach, I have kept the code that closes and cancels the modal in the main controller.
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').directive('myModal', function() {
return {
restrict: 'E',
templateUrl: 'myModalContent.html',
controller: function ($scope) {
$scope.selected = {
item: $scope.items[0]
};
}
};
});
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance;
var modalScope = $scope.$new();
modalScope.ok = function () {
modalInstance.close(modalScope.selected);
};
modalScope.cancel = function () {
modalInstance.dismiss('cancel');
};
modalInstance = $modal.open({
template: '<my-modal></my-modal>',
size: size,
scope: modalScope
}
);
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
I create a directive to create modals easily. A modal content is based on a template view.
angular.module('your_app').directive('modalViewUrl', function ($modal) {
return {
restrict: 'A', // A: attribute
scope: { // isolate scope
'modalViewUrl': '#', // modal view url to render the modal content
'modalController': '#' // modal view controller (optional)
},
link: function($scope, element, attrs){
element.bind('click', function(){
var template =
'<div class="modal-body">' +
'<button ng-click="$close()" type="button" class="close" aria-label="Close">' +
'<span aria-hidden="true">×</span>' +
'</button>' +
'<div ng-include="\'' + $scope.modalViewUrl + '\'"></div>' +
'</div>';
// see modal reference from ui bootstrap at <http://angular-ui.github.io>
var modalInstance = $modal.open({
animation: true,
template: template,
controller: $scope.modalController,
});
});
}
};
});
Example how to use it:
index.html
<a modal-view-url="hello.html" modal-controller="HelloCtrl" href="#">
Click here to open the modal
</a>
hello.html
<h1> Hello World {{name}} </h1>
HelloCtrl.js
angular.module('yourApp').controller('HelloCtrl',
function ($scope, $modalInstance) {
// $modalInstance: same from from ui bootstrap
$scope.name = "Xico";
});
A modal view can have its own controller. Example:
hello.html (modified)
<h1 ng-controller="Hello2Ctrl"> {{msg}} {{name}} </h1>
Hello2Ctrl.js
angular.module('yourApp').controller('Hello2Ctrl',
function ($scope) {
$scope.msg = "Hello Worldsszz";
$scope.name = "Zefa";
});
Observe that the modal output will be "Hello Worldsszz Xico", because the modal controller (HelloCtrl) will be rendered after view controller (Hello2).
Reference
It's even more late reply, but someone may find it useful.
I have enhanced Fernando Felix answer and made my own quite flexible directive which communicates with the controller, which I think might be solution for this question.
Directive
var modalUrl = function ($modal) {
return {
restrict: 'A', // A: attribute
scope: { // isolate scope
'modalUrl': '#', // modal view url to render the modal content
'modalController': '#', // modal view controller (optional)
'value': "="
},
link: function(scope, element, attrs){
console.log('modalUrl link');
var modalInstance;
var template = [
'<div class="modal-body">',
'<button ng-click="$close()" type="button" class="close" aria-label="Close">',
'<span aria-hidden="true">×</span>',
'</button>',
'<div ng-include="\'' + scope.modalUrl + '\'"></div>',
'</div>'
].join('');
element.bind('click', function(){
// see modal reference from ui bootstrap at <http://angular-ui.github.io>
modalInstance = $modal.open({
size: attrs.size,
animation: true,
template: template,
resolve: {
params: function () {
console.log('value passed to modal:');
console.log(scope.value);
return scope.value;
}
},
controller: scope.modalController
});
modalInstance.result.then(
function (returnValue) {
// alert('value: '+returnValue);
console.log('modal returnValue:');
console.log(returnValue);
scope.value = returnValue;
}, function () {
console.log('Modal dismissed at: ' + new Date());
}
);
});
}
};
}
modalUrl.$inject = ['$modal'];
angular.module('app').directive('modalUrl', modalUrl);
Controller
var HelloCtrl = function ($scope, $modalInstance, modalVal) {
// $modalInstance: same from from ui bootstrap
console.log('Hello init!');
// modalVal is the init modal value passed via directive
console.log(modalVal);
// your code
$scope.name = modalVal;
$scope.ok = function() {
$modalInstance.close(this.name); // returnValue
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
HelloCtrl.$inject = ['$scope', '$modalInstance','params'];
angular.module('app').controller('HelloCtrl',HelloCtrl);
inline template
<script type="text/ng-template" id="hello.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<input type="text" ng-model="name" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</script>
It's one controller and template per popup type, then you can call it multiple times with:
<a modal-url="hello.html" modal-controller="HelloCtrl" value="yourVal" ng-init="yourVal='test'" href="#">Click here to open the modal</a>
You can initialize value with whatever - ie. object, array etc.
or external template
Pretty much the same, just url changes and template file is used for template.
<a modal-url="/modal/test1.html" modal-controller="HelloCtrl" value="yourVal" ng-init="yourVal='test'" href="#">Click here to open the modal</a>
test1.html
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<input type="text" ng-model="name" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
Modal size etc.
Just add parameter size="sm|lg" for the modal link/button ie.
Click here to open the modal
For standard size skip the parameter.
You may enhance it yourself using link function attrs.
I'm kanda late replay put simplest way is to use
$scope.$parent.$close(result);
$scope.$parent.$dismiss(reason);
This works form your directive controller.
I need to create a directive that can be used inside Angular UI modal. This directive also need to know about modal's controller in order to use some functions from it. What I have now:
JS:
'use strict';
var DemoApp = angular.module('DemoApp', [ 'ui.bootstrap' ]);
DemoApp.controller('PageController', ['$scope', '$modal', function($scope, $modal){
$scope.openModal = function(){
var scope = $scope.$new(true);
$modal.open({
'templateUrl' : 'modal.html',
'controller' : 'ModalController',
'scope' : scope
});
}
}]);
DemoApp.controller('ModalController', ['$scope', '$modalInstance', function($scope, $modalInstance){
$scope.ok = function() {
$modalInstance.dismiss();
};
$scope.cancel = function() {
$modalInstance.dismiss();
};
}]);
DemoApp.directive('expression', function() {
return {
restrict : 'A',
require : ['ngModel', '^ModalController'],
link : function(scope, element, attrs, controllers) {
console.log(arguments);
}
};
});
Modal template:
<div class="modal-header">
<h3>Test!</h3>
</div>
<div class="modal-body">
<input data-ng-model="someValue" expression>{{someValue}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="ok()">Ok</button>
<button class="btn btn-warning" data-ng-click="cancel()">Cancel</button>
</div>
And the red button:
<button id="demoButton" class="btn btn-primary" data-ng-click="openModal()">Click me!</button>
But when the modal is created ModalController is not resolved, and I get $compile:ctreq error:
Error: [$compile:ctreq] http://errors.angularjs.org/1.2.17/$compile/ctreq?p0=ModalController&p1=expression
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:6:450
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:80)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:137
at Array.forEach (native)
at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:7:280)
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:114)
at N (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:54:128)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:47:82)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:47:99) <input data-ng-model="someValue" expression="" class="ng-pristine ng-valid">
I tried to debug the code: getControllers() somewhere around 6433 LOC at angular.js is used to search controller: value = value || $element[retrievalMethod]('$' + require + 'Controller');, so I tried to require Modal instead of ModalController (Controller is appended by Angular), but it didn't help. I cannot understand how $element[retrievalMethod] works (stepped into it, but it is to low-level). So, I'm stuck and appreciate any help.
I've created a Plunk, so you can play and see in console what I mean.
Please, checkout updated plunker:
ModalController scope isn't child scope of PageController, so if you need to pass variables to ModalController you should do it through resolving dependencies directly.
In your directive you can set scope as child of ModalController scope, so you can have access to functions defined there instead of requiring ModalController.