I am trying to load md-dialog in angular js1.5 when on click of button and all i see is the html markup in modal pop up but not the controller loads for that component. Following is my markup for showing the md-dialog
File which calls the dialog
$mdDialog.show ({
template: require('../traderdialog/traderdialog.html'),
controller: Controller,
controllerAs: 'vm',
locals : {
traderId : traderId
},
clickOutsideToClose : true
});
}
So when I do controller :Controller it goes to different component as I have in my directory structure . My code for traderdialog.js follows as
angular.module('dashboard')
.component('traderdialog', {
template: require('./traderdialog.html'),
controller: Controller,
controllerAs: 'vm',
bindings: {
}
});
function Controller( $mdDialog) { *some code* }
$mdDialog.show ({
template: require('../traderdialog/traderdialog.html'),
controller: function ControllerName($scope){
$scope.data = "Controller Loaded";
},
locals : {
traderId : traderId
},
clickOutsideToClose : true
});
}
OR
$mdDialog.show ({
template: require('../traderdialog/traderdialog.html'),
controller: controllerName,
locals : {
traderId : traderId
},
clickOutsideToClose : true
});
}
function controllerName($scope){
$scope.data = "Controller Loaded";
}
There is two way to use controller in mdDialog, one of them is use same scope with the parent in preserve scope:
$mdDialog.show({
controller: function () {
return self;
},
templateUrl: 'templates/mdDialog.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: false,
bindToController: true,
scope: $scope,
hasBackdrop: true,
preserveScope: true
});
another one is use with controllerAs attribute, and initialize it:
$mdDialog.show({
controller: DialogController,
templateUrl: 'templates/mdDialog.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
controllerAs: 'DlgCtrl',
bindToController: true,
locals: {
formData: $scope.formData,
}
})
and you can reach your locals with DlgCtrl.formData syntax.
You should inject the data you want from the parent controller to the the scope of modal. When modal opens it has its own scope.
$mdDialog.show ({
template: require('../traderdialog/traderdialog.html'),
controller: 'MyCtrl',
locals : {
traderId : traderId
},
clickOutsideToClose : true
});
}
Now, lets define your controller for you modal traderdialog.html.
angular.module('app').controller('MyCtrl',['traderId', function(traderId){
console.log(traderId);
}]);
Now the traderId will reflect on your modal.
Related
I want to parent controller to resolve its injection again when state changes from child to parent.
.state('settings.billing', {
url: '/billing',
controller: 'BillingCtrl as vm',
template: require('./templates/billing.tpl.jade'),
resolve: {
sources: function(StripeService) {
return StripeService.getSources();
}
}
})
.state('settings.billing.newsource', {
url: '/add-source',
onEnter: showAddSourceModal
})
function showAddSourceModal($state, $modal) {
$modal.open({
template: require('./templates/add-source.tpl.jade')(),
controller: 'AddSourceCtrl as vm',
backdrop: true,
keyboard: true,
size: 'md'
})
.result
.finally(function() {
$state.go('^');
});
}
Basically I want sources for BillingCtrl called again when modal is closed. Is it possible?
I have a directive where i bind the tabInfo to tabdata which is an array.
angular.module('widgets')
.directive('tabs', function() {
return {
restrict: 'E',
require: 'info',
transclude: true,
scope: {},
controllerAs: 'tabs',
bindToController: {
tabInfo: '=tabdata'
},
templateUrl: 'Template.html',
link: function(scope, element, attrs, tabs) {
scope.$watch('tabs.tabInfo', function() {
tabs.populateDataProvider();
}, true);
},
controller: ['$filter', '$state', function($filter, $state) {
}]
};
});
I need to watch on the "tabInfo" for any change and populate some data. However , my watch is not called at all. Is there something wrong here , in the way that I am refering to tabs.tabInfo?
A better solution to this would be to have an ng-if along with the directive so as to make sure that the directive is rendered only when there is data to populate . This avoids the need of having a watcher inside the directive .
So you could use ,
<tabs ng-if="$ctrl.tableData.length" tab-info="$ctrl.tableData"></tabs>
For your question above , you need to bind this to a variable to tabs
to get it work .
var tabs = this;
EDIT:
There is also a correction on your code . It should be ,
angular.module('widgets')
.directive('tabs', function() {
return {
restrict: 'E',
require: 'info',
transclude: true,
bindToController: true,
controllerAs: 'tabs',
scope: {
tabInfo: '=tabdata'
},
templateUrl: 'Template.html',
link: function(scope, element, attrs, tabs) {
scope.$watch('tabs.tabInfo', function() {
tabs.populateDataProvider();
}, true);
},
controller: ['$filter', '$state', function($filter, $state) {
}]
};
});
I have started to use directives with ui-router:
$stateProvider
.state('book', {
abstract: true,
url: '/:book',
template: '<book-tabs />'
})
.state('book.about', {
url: '',
template: '<book-about />'
})
.state('book.stats', {
url: '/statistics',
template: '<book-stats />'
});
Here is one of the directives:
export default function(app) {
app.directive('bookStats', function() {
return {
restrict: 'E',
controllerAs: 'statsTab',
templateUrl: 'book-stats.tpl.html',
controller: 'BookStatsCtrl'
};
});
};
Inside of book-stats directive I want to call stats-list directive and pass book object.
<stats-list review="statsTab.book"></stats-list>
And here is stats-list directive:
export default function(app) {
app.directive('statsList', function() {
return {
restrict: 'E',
scope: {
book: '='
},
templateUrl: 'stats-list.tpl.html',
controller: 'CircleRankListCtrl'
};
});
};
The problem is that $scope.book is undefined in stats-list directive even though that statsTab.book not undefined in book-stats directive.
What am I doing wrong?
I'm using angular material (AM) and I want to pass an external controller to $mdDialog.
In AM documentation we create dialog like this :
function DialogController($scope, $mdDialog) { ... }
...
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
As you can see controller is only a function in the current controller that call $mdDialog. I would like to use a external controller.
myApp.controller('ElementEditCtrl', function($scope,
$rootScope, $stateParams, $filter, $state, ElementsService, element, personnes) { ... }
As you can see, I have some resolve in params. For the moment i'm using $controller service to instantiate my controller :
var ctrl = $scope.$new();
$controller('ElementEditCtrl', {$scope: ctrl, personnes: EmployesService.get(), element: angular.copy($scope.element)});
$mdDialog.show({
controller: ctrl,
templateUrl: 'FrontEnd/App/views/ElementEditView.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
})
And I have this error in my browser console :
Error: ng:areq Bad Argument
Argument 'fn' is not a function, got n
I need to use an external controller because I need to open this dialog from different views and I don't want to duplicate the code in every controllers.
Make a service and expose this function:
function createDialog($scope) {
return function() {
$mdDialog.show({
scope: $scope.$new(),
templateUrl: 'some/temmplate.html,
clickOutsideToClose: true
});
};
Then just paste the scope of the controller creating the dialog.
I'm trying to reload a single nested view but it reload the full page.
Here is my state provider :
$stateProvider
.state('connected',{
views: {
'friendsList': {
templateUrl: '/angular/php/connectedFriendsList.php',
controller: 'friendsListController'
},
'statusTextInput': {
templateUrl: '/angular/php/statusTextInput.php',
controller: 'statusTextInputController'
},
}
})
.state('connected.refresh',{
parent: 'connected',
views: {
'status#': {
templateUrl: '/angular/php/status.php',
controller: 'statusController'
},
}
})
And here is my function tu refresh "connected.refresh" :
refresh: function(){
$templateCache.remove('/angular/php/status.php');
$state.transitionTo('connected.refresh', {}, { reload: 'connected.refresh', inherit: true, notify: true});
}
Thanks in advance!