I'm struggling to find the right way to use an Angular-Strap modal/aside with a controller.
Yes, the calling code could inject the $scope, making it available to the modal. But there are issues with that.
myModal = $modal({
scope: $scope,
template: 'template.html',
show: false,
backdrop: "static",
keyboard: false,
persist: true
});
This will pollute the calling controller with potentially modal-only methods and properties.
I usually use "controllerAs", and therefore don't even have a $scope to inject into the modal in the first place!
You could create a new $scope and then insert methods into that, but again, that would require injection of $scope into the parent controller. Bad bad bad.
If I use ng-controller inside the modal template, I can have my controller. But his gives me another problem: now I cannot inject data into the modal controller, and there is no way my calling code can know when the modal is closed and returning data from the modal also becomes a chore (involves a factory just to keep the parent and child controller data synchronized).
I'm really struggling how to make this the best way.
Any ideas?
Cheers
Update
This is how I do it for now:
In my template I make a directive that opens up the modal.
Example:
<my-modal
on-update="ctrl.OnDialogUpdate">
</my-modal>
So basically the directive calls my modal and when the modal closes or wants to return with a result, it calls the method specified in the directive parameter.
This is how the directive could look:
(function() {
'use strict';
angular.module('app').directive('myModal',myModal);
function myModal(){
return {
restrict: 'E',
// The modal callback specified in the directive tag
scope: {
onUpdate: '&?'
},
replace: true,
// This is the template for the directive, not the modal
templateUrl: 'button.html',
controllerAs: 'ctrl',
bindToController: true,
compile: function (element, attrs) {
return function (scope, element, attrs) {
};
},
/*#ngInject*/
controller: function($scope, $log, $aside){
var self = this;
var myDialog = $aside({
// Dialog template
template: 'my-modal.template.html',
show: false,
animation: 'am-fade-and-slide-right',
placement: 'right',
backdrop: true,
html: true,
container: '',
scope: $scope
});
// Opens modal
self.ShowDialog = function(){
myDialog.$promise.then(function() {
myDialog.show();
})
};
// Expose Update() method to the dialog template
$scope.Update = function(){
if(angular.isFunction(self.onUpdate) ) {
self.onUpdate()();
}
}
}
}
}
})();
Just use the 'controller' option:
$scope.showModal = function() {
$modal({
title: 'My Title',
content: 'My Content',
show: true,
controller: 'ModalCtrl'
});
};
Here's a plnkr
You can also try to use:
var modal= $modal({
templateUrl: '.../../xxx.modal.html',
show: false,
backdrop: 'static',
controller: 'anyCtrl as vm'
});
In this case your modal dialog will have the scope of the "anyCtrl" Controller. In the template you can just use vm.title or other properties which are defined in the controller.
Related
I'm using an angular directive to generate a reusable template and show some data in it. The directive also has an ng-click that should take an object and pass it to the parent controller. I'm kind of stuck, not really sure how to pass that data from the directive controller to the scope of the parent controller. I read here but the circumstances are a bit different.
The js code of the directive:
angular.module("app")
.directive('userData', function() {
return {
restrict: "E",
templateUrl: "directives/userData/userData.html",
scope: {
userObj: "="
},
controller: function($scope){
},
link: function(scope, elements, attrs, controller){
}
}
});
And this is the directive html:
<div class="style" ng-click="displayFullDetails(userObj)">{{userObj.first_name}}</div>
Parent controller:
angular.module("app").controller("parentCtrl", ['$scope', function ($scope) {
angular.element(document).ready(function () {
getDataService.getJsonData().then(function (data) {
$scope.users = data.data;
})
});
}]);
My directive's controller is not getting updated with the scope that was set using the '=' two-way-binding.
Here is my directive:
.directive('navigation', function() {
return {
restrict: 'E',
scope: {
selection: '=?selectedItem',
goforward: '&onForward'
},
controller: function() {
var vm = this;
vm.hideForward = !vm.selection
},
controllerAs: 'vm',
bindToController: true,
template: '<button ng-hide="vm.hideForward" ng-click="vm.goforward()">Continue</button>'
};
});
Here is my html file where I use the directive:
<div class='product' ng-click='ctrl.selectedItem = true'>item</div>
<navigation on-forward="ctrl.goForward()" selected-item='ctrl.selectedItem'></navigation>
note: the ctrl.goForward() works just fine.
The vm.selectedItem in the html's controller is only set to true once the product div is clicked.
I expected the ctrl.selectedItem to get passed into my directive's controller and modify the vm.hideForward value, except this is not happening.
I want to be able to change whether the navigation directive is visible and/or active depending on variables that are passed into it from whatever controller's scope I used my directive in.
If I place a <div>{{vm.selectedItem}}</div> inside my directive's template, that does print out properly depending on how ctrl.selectedItem that value changes. My issue is getting the directive's controller to change as well.
How am I setting up this scope binding improperly? I am using angular 1.5.3
You dont need the double brackets for binding a function to ng-click, use ng-click="vm.goforward()"
Pass the function to the directive as on-forward="ctrl.goForward", if you use parenthesis you will be passing the result of the function call instead.
Also for, ng-click='ctrl.selectedItem === true' you should use ng-click='ctrl.selectedItem = true' to set the value, as === is a comparison operator.
ctrl.selectedItem seems to be a variable from the present controller. So while passing it as attribute, you need to pass it as '{{ctrl.selectedItem}}" .
Try using:
**<navigation on-forward="ctrl.goForward()" selected-item='{{ctrl.selectedItem}}'></navigation>**
Try this
.directive('navigation', function() {
return {
restrict: 'E',
scope: {
selection: '=selectedItem',
goforward: '&onForward'
},
controller: function(scope) {
var vm = this;
vm.hideForward = !scope.selection
},
controllerAs: 'vm',
bindToController: true,
template: '<button ng-hide="vm.hideForward" ng-click="vm.goforward()">Continue</button>'
};
});
In angular.js, can a directive controller access data in a page controller that loaded it?
/**
* Profile directive
*/
.directive('profile', function () {
return {
restrict: 'E',
replace: true,
templateUrl: '/partials/users/_profile.html',
scope: {
user: '=',
show: '=?'
},
controller: function($scope, $rootScope){
$scope.show = angular.isDefined($scope.show) ? $scope.show : { follow: true, link: true };
$scope.currentUser = $rootScope.currentUser;
//do stuff here and then set data in UserShowCtrl
}
};
});
The <profile user="user"></profile> method is called from ./users/show.html which uses the UserShowCtrl controller.
Is there anyway I can use scope on the profile directive with its own controller and still be able to pass data to the UserShowCtrl?
Even though the profile can be isolated to its own functionality, it still needs to set some data on the page level in the UserShowCtrl controller.
Here is where _user.html is loading the <profile> directive. The data for the page is served by the UserShowCtrl and has some collections that get updated when things happen, like following a user.
<ol class="following" ng-show="showConnections == 'following'">
<li ng-repeat="following in user.following">
<profile user="connections[following]"></profile>
</li>
</ol>
Right now there is an ng-click="follow(user)"> that is happening in the _profile.html. I would like to be able to have the directive handle this but also update the collections in the UserShowCtrl.
Edit: here is a plunker demonstrating what I'm trying to do:
http://plnkr.co/edit/9a5dxMVg9cKLptxnNfX3
You need to use a service in order to share any information between controllers, directives, services
something like
angular.module('myapp',[]).
service('myservice',function(){
return {a:'A',b:'B'}
}).
controller('mycontroller',['myservice',function(myservice){
//do someting with myservice
}]).
directive('mydirective',['myservice',function(myservice){
//do someting with myservice
}]);
there controller and directive access the same data through the service
You can access the parent scope from your directive with $scope.$parent.myvar.
myvar will be resolved in parent scope, which means prototypical scope inheritance is used to resolve the variable.
However, this does not guarantee that myvar is coming from the same scope as UserShowCtrl since its possible that any scope in between the 'profile' directive and UserShowCtrl's scope may override 'myvar'.
A better solution would be to use directive-to-directive communication. There are generally two ways for directives to communicate:
Through attributes passed into your directive. You've already used this method to import 'user' and 'show' from parent scope into your directive's isolated scope.
Requiring another directive. When you use 'require: ^UserShow', you are specifying that your 'profile' directive requires another directive as a dependency. The '^' means that it will search for the directive on the current element, or any parent element further up the DOM tree. UserShow's controller is then passed to your link function:
.directive('UserShow', function () {
return {
restrict: 'E',
controller: function($scope){
$scope.myvar = 'test';
this.setMyVar = function(var) {
$scope.myvar = var;
}
}
};
});
.directive('profile', function () {
return {
restrict: 'E',
replace: true,
templateUrl: '/partials/users/_profile.html',
require: '^UserShow',
scope: {
user: '=',
show: '=?'
},
controller: function($scope, $rootScope){
},
link: function(scope, element, attr, UserShowCtrl) {
UserShowCtrl.setMyVar('hello world!);
}
};
});
HTML:
<user-show>
<profile>...</profile>
</user-show>
I am not quite sure what your after.
You are already having 2 two-way data bindings, which means that if you change user in your directive, that will also flow to the outside scope.
So you already have a solution in front of you...
So if that is not "good enough", there is something missing in your question.
Here is an illustration: http://plnkr.co/edit/qEH2Pr1Pv7MTdXjHd4bD?p=preview
However, if you use something in your outside template that creates a child scope, binding it as "value" there is NOT enough, you need to have a . in there.
But that is where there is missing something to the question, if you share your show.html I may be able to find where the scope breaks apart and explain why...
Relevant Source from demo.js:
app.directive('profile', function () {
return {
restrict: 'E',
replace: true,
template: '<div><input type="text" ng-model="user"></input></div>',
scope: { //defines an isolate scope.
user: '=',
show: '=?'
},
controller: function($scope, $rootScope){
$scope.show = angular.isDefined($scope.show) ? $scope.show : { follow: true, link: true };
$scope.currentUser = $rootScope.currentUser;
$scope.user = "Changed by scope!";
//do stuff here and then set data in UserShowCtrl
}
};
});
app.controller('UserShowCtrl', function($scope) {
$scope.value = "Value set outside!";
$scope.alertValue = function() {
alert($scope.value);
}
});
Relevant Source from home.html:
<div ng-controller="UserShowCtrl">
{{ value }}
<profile user="value"></profile>
<button ng-click="alertValue()">ALERT!</button>
</div>
Ok, so it's fairly easy to create a directive for a colorbox, as explained here:
How to use Colorbox with Angular JS
But what if you want to then bind buttons to ng-click events? Best practice would suggest that the handler function for the action (delete in my case) should be in a directive defined on the controller. My colorbox directive looks like this:
mod.directive('colorbox', function() {
return {
restrict: 'A',
scope: true,
controller: function($scope, $element){
$scope.delete = function() {
console.log('I want this code to fire');
};
},
link: function (scope, element, attrs) {
$(element).colorbox({ inline: true, title: ' ', href: "#delconfirm", className: "delgroup", width: 450, height: 200, close: "" }, function() {
});
}
};
});
My template that will be loaded into the colorbox contains an action button with an ng-click:
<button ng-click="delete()">Delete</button>
However, that doesn't work. IF I move that delete function to my parent controller instead, and remove the controller from the directive, it then works. Any ideas why?
I'm using the $dialog directive to show a dialog in my application. The dialog is opened from another directive :
angular.module('axa.directDebit.directives').directive("mandateHistoryDetail", ['$dialog', function($dialog) {
return {
restrict: 'E',
template: '<a class="btn btn-small" ng-click="openDialog()">Détail</a>',
scope: {
model: '='
},
link: function (scope, element, attrs) {
scope.openDialog = function(){
var d = $dialog.dialog({
backdrop: true,
keyboard: true,
backdropClick: true,
dialogFade: true,
templateUrl: 'app/directDebit/views/mandates.detail.history.detail.html',
controller: 'mandates.detail.history.detail.ctrl',
resolve: {
data: function () {
return scope.model;
}
}
});
d.open();
}
},
controller: 'mandates.detail.history.detail.ctrl'
}
}]);
The problem I'm having, is that from the dialog's controller, I would like to access the calling directive's scope. In particular the 'model' property in the above code.
I've tried using resolve, but the from the dialog controller I don't know how to get hold of data.
Any idea what I should change ?
In the dialog controller, you should just add it as a dependency.
You called it data so it should be -
angular.module('yourModule').controller('mandates.detail.history.detail.ctrl',
function($scope, data){
...
});
Just as a side note - I would extract the behavior of opening the $dialog to an outside view controller and not inside a directive, 'cause it looks like application logic to me and directives should aspire to be reusable.