We Keep Coding

How to use a function from Component inside the page controller in AngularJS?

I want to use a function from a component inside my page.controller
First, I don't know if it is possible? and Second, if it is possible, how should I do that?
Here I have have function inside the component.controller called checkStatus, I want to execute it, therefore my ng-disabled turns false and I can click on SAVE button.
testComponent.component.js:
export default {
template: temp,
controller: myComponentController,
controllerAs: 'vm',
bindings: {
popupMsg : '&'
}
};
function myComponentController() {
'ngInject';
this.popupMsg = function() {
alert("It is working!");
this.checkStatus();
};
this.checkStatus = function() {
this.mustPass = true;
};
}
myPage.controller.js:
export class MyPageController {
constructor() {
'ngInject'
...
}
save() {
...
}
}
myPage.html:
<form>
<test-component mandatory="vm.popupMsg()"> </test-component>
<div>
<button type="submit" ng-click="vm.save()" ng-disabled="!vm.mustPass"> Save </button>
</div>
</form>
Plunker for testing

You need to have output bindings on your testComponent.
testComponent.component.js
bindings: {
statusChange: '&'
}
function myComponentController() {
this.checkStatus = function() {
this.mustPass = true;
this.statusChange({$event: this.mustPass});
};
mypage.html
<test-component mandatory="vm.popupMsg()" status-change="vm.onStatusChange($event)"> </test-component>

In Angular 1.x how can I access controller methods from a custom directive?

I am currently trying to figure out the best way to access two controller methods from within my custom directive. My current code looks like so:
Parent Component Template (navMenus.html):
<menu-toggle section="navItem" ng-if="navItem.type === 'toggle'"></menu-toggle>
Parent Component Controller (navMenus.controller.js):
...
isOpen(section) {
return this.NavMenusFactory.isSectionSelected(section);
}
toggleOpen(section) {
this.NavMenusFactory.toggleSelectSection(section);
}
...
Directive Template (menuToggle.html):
<md-button class="md-button-toggle" ng-click="vm.toggle()">
{{ section.text | translate }}
</md-button>
<ul ng-show="vm.isOpen()" class="menu-toggle-list">
<li ng-repeat="subItem in section.subItems">
{{ subItem.text | translate }}
<menu-link section="subItem"></menu-link>
</li>
</ul>
Directive (menuToggle.directive.js):
...
return {
restrict: 'AE',
template,
replace: true,
scope: {
section: '=',
},
link(scope, element) {
$timeout(() => {
const $element = element;
scope.vm.toggle = function () {
console.log(scope.$parent.isOpen());
};
scope.isOpen = function () {
return $element.isOpen(scope.section);
};
scope.toggle = function () {
$element.toggleOpen(scope.section);
};
});
}
}
How can I access these methods?

Since there is scope in your directive, you have created an isolated scope.
So in order order to access the controller's function you can make use of events
Inside directive, create an $emit event, on the click event:
scope.toggle = function toggle (){
scope.$emit('EVENT_NAME', { data: true }) // here data is optional
}
In controller, you can perform action as:
$scope.$on('EVENT_NAME', function(event, data){
// here you can call the controller's method
})

This is the best way i know, to call a controller function from directive.
/* Directive template */
<md-button class="md-button-toggle" ng-click="vm.toggle()">
{{ section.text | translate }}
</md-button>
<ul ng-show="isOpen()" class="menu-toggle-list">
<li ng-repeat="subItem in section.subItems">
{{ subItem.text | translate }}
<menu-link section="subItem"></menu-link>
</li>
</ul>
/* Directive Code */
...
return {
restrict: 'AE',
template,
replace: true,
scope: {
section: '=',
isOpen: '&'
},
link(scope, element) {
$timeout(() => {
const $element = element;
scope.vm.toggle = function () {
console.log(scope.$parent.isOpen());
};
scope.isOpen = function () {
return $element.isOpen(scope.section);
};
scope.toggle = function () {
$element.toggleOpen(scope.section);
};
});
}
}
/* in your view, you can call controller fn */
<menu-toggle section="navItem" is-open="isOpen()" ng-if="navItem.type === 'toggle'"></menu-toggle>

Angular-Formly: Interacting with multiple forms in multiple directives

i'm trying to figure out how to save and react on multiple forms in multiple directives.
To give you a short overview:
Screenshot of the current view
I've got three tabs containing forms and a fourth containing a JsTree (Groups). Each of the three tabs contains a directive, which, in turn, contains a Formly form.
The tabs are wrapped by a main directive which contains a footer directive with the save and cancel buttons in the bottom right corner.
Main directive:
/**
* Displays the ui for editing a specific user
*/
export function UserDetailsDirective() {
class UserDetailsDirective {
/*#ngInject*/
constructor(
$stateParams,
userService,
formlyChangeService
) {
this.currentUser = this.currentUser || {};
this.originalUser = this.originalUser || {};
this.userForms = {
mainData: {},
personalData: {},
basicSettings: {}
};
this.savingAllowed = true;
/* Second try: Registering a callback at the change service, which will be executed on any field change in the passed form (mainData) */
formlyChangeService.onFormChange('mainData', () => {
console.log('test123');
console.log('this123', this);
console.log('this.userForms.mainData.api.isValid()', this.userForms.mainData.api.isValid());
});
if ($stateParams.id > 0) {
userService.getUser($stateParams.id).then((userData) => {
userData.Birthday = new Date(userData.Birthday);
this.currentUser = userData;
this.breadcrumbData = [...];
})
}
}
onSave(controller) {
alert('on save');
console.log('controller', controller);
}
}
return {
restrict: 'E',
templateUrl: 'components/usermanagement/edit/user-details/user-details.directive.html',
controller: UserDetailsDirective,
controllerAs: 'controller',
bindToController: true
}
}
<breadcrumb [...]></breadcrumb>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#mainData">Account data</a></li>
<li><a data-toggle="tab" data-target="#personalData">Personal data</a></li>
<li><a data-toggle="tab" data-target="#basicSettings">Settings</a></li>
<li><a data-toggle="tab" data-target="#userGroupAssignment">Groups</a></li>
</ul>
<div class="row">
<div class="col-lg-6">
<div class="tab-content">
<div id="mainData" class="tab-pane fade in active">
<main-data user="controller.currentUser"></main-data>
</div>
<div id="personalData" class="tab-pane fade">
<personal-data user="controller.currentUser"></personal-data>
</div>
<div id="basicSettings" class="tab-pane fade">
<basic-settings user="controller.currentUser"></basic-settings>
</div>
<div id="userGroupAssignment" class="tab-pane fade">
<group-assignment user="controller.currentUser"></group-assignment>
</div>
</div>
</div>
<div class="col-lg-6">
[...] <!-- Right column -->
</div>
</div>
<!-- Footer -->
<user-details-footer
on-save="controller.onSave(controller)"
saving-allowed="controller.savingAllowed"
></user-details-footer>
Footer directive
/**
* Displays the user details footer
*/
export function UserDetailsFooterDirective() {
class UserDetailsFooterDirective {
/*#ngInject*/
constructor(
$state,
Notification,
$translate
) {
this.state = $state;
this.notification = Notification;
this.translate = $translate;
this.savingAllowed = this.savingAllowed || false;
}
/**
* Event that is triggered on save button click
*
* Propagates to the parent controller via attribute binding
*/
saveEvent() {
if (typeof this.onSave === 'function') {
this.onSave();
}
}
/**
* Navigates to the user list
*/
goToUserList() {
this.state.go('userList');
}
}
return {
restrict: 'E',
templateUrl: 'components/usermanagement/edit/user-details-footer/user-details-footer.directive.html',
controller: UserDetailsFooterDirective,
controllerAs: 'controller',
bindToController: true,
scope: {
onSave: '&?',
savingAllowed: '=?'
}
}
}
<nav class="navbar navbar-fixed-bottom">
<div class="container-fluid pull-right">
<button class="btn btn-default" ng-click="controller.goToUserList()"><i class="fontIcon fontIconX"></i> Cancel</button>
<button class="btn btn-primary" ng-disabled="controller.savingAllowed !== true" ng-click="controller.saveEvent()"><i class="fontIcon fontIconSave"></i> Save</button>
</div>
</nav>
First tab's directive
/**
* Displays the contents of the tab "Account data"
*/
export function MainDataDirective() {
class MainDataDirective {
/*#ngInject*/
constructor(
formlyFormService,
mainDataFieldProviders,
$state,
userSubmitService,
$timeout,
formlyChangeService,
$scope
) {
this.state = $state;
this.$timeout = $timeout;
this.userSubmitService = userSubmitService;
this.model = {};
this.originalUser = this.originalUser || {};
this.fields = [];
this.form = null;
var that = this;
/* Third try: Watching the form instance => partial success */
this.watch('formMainData', function(x, y, form) {
console.log('formMainData', form);
that.form = form;
form.watch('$invalid', function(foo, bar, value) {
/* This will react on field changes but it seems really dirty to me */
console.log('$invalid', arguments);
});
});
formlyFormService.getFormConfiguration(mainDataFieldProviders).then((result) => {
/* Here the formly fields are set */
this.fields = result;
/* Second try: A service which provides a callback that will be executed on field invalidation => no success */
formlyChangeService.registerFields(this.fields, 'mainData');
}, (error) => {
console.error('getMainDataFields error:', error);
});
this.api = {
isValid: angular.bind(this, this.isValid),
submit: angular.bind(this, this.onSubmit)
}
}
/* First try to get the validity of the fields => no success */
isValid() {
//return this.$timeout(() => {
let isValid = true;
this.fields.some((field) => {
if (
field.validation.errorExistsAndShouldBeVisible === true
|| field.validation.serverMessages.length > 0
) {
isValid = false;
return true;
}
});
//return isValid;
//}, 10);
return isValid;
}
/**
* Method triggered by the formSubmit event
*/
onSubmit() {
this.userSubmitService.submitUser(this.fields, this.model);
}
}
return {
restrict: 'E',
templateUrl: 'components/usermanagement/edit/main-data/main-data.directive.html',
controller: MainDataDirective,
controllerAs: 'controller',
bindToController: true,
scope: {
originalUser: '=user',
api: '=?'
},
link: (scope) => {
scope.$watch('controller.originalUser', (newValue) => {
if (newValue.hasOwnProperty('ID')) {
scope.controller.model = angular.copy(newValue);
}
});
}
}
}
<form name="controller.form" ng-submit="controller.onSubmit()" class="form-horizontal" novalidate>
<formly-form form="controller.formMainData" model="controller.model" fields="controller.fields" ></formly-form>
</form>
Second try: FormlyChangeService => got change event fired but before validation => no success
export /*#ngInject*/ function FormlyChangeService() {
let callbacks = [];
return {
triggerFormChangeEvent: triggerFormChangeEvent,
registerFields: registerFields,
onFormChange: onFormChange
};
function triggerFormChangeEvent(value, options) {
callbacks.forEach((callback) => {
if (
typeof callback === 'function'
&& callback.formDirective === options.templateOptions.formDirective
) {
callback();
}
});
}
function onFormChange(formDirective, callback) {
callback.formDirective = formDirective;
callbacks.push(callback);
}
function registerField(fieldConfig) {
fieldConfig.templateOptions.changeEvents.push(
triggerFormChangeEvent
);
}
function registerFields(fieldConfigs, formDirective) {
fieldConfigs.forEach((fieldConfig) => {
fieldConfig.templateOptions.formDirective = formDirective;
registerField(fieldConfig);
fieldConfig.watcher = {
listener: function() {
console.log('listener', arguments);
}
};
console.log('fieldConfig', fieldConfig);
fieldConfig.watch('$valid', function() {
console.log('valid field', arguments);
});
});
}
}
The Formly forms are fed with an user model, which is provided by the main directive.
I have to save all four tabs at the same time because there are several mandatory fields that have to be present to save the entered record.
Now here comes the tricky part:
I want the save button to be disabled if the model hasn't changed or an error occurred at any field in any form. I also want to know which form the error comes from.
What i thought about is an event or watcher in the Formly field config or something similar.
I've tried the onChange event on the field config but it is fired right before the field validation runs, so i won't get the current error status of that field.
The error status has to be passed up to the main directive from where it should be passed down to the save button.
Can anyone help me getting the forms (or even better the respective fields) to tell the main directive that there is an invalid field?
It's really difficult to exemplify such a complex task, so if there is any obscurity please let me know.
Thank you very much in advance.
Julian

I think you should have a service or factory that all your directive depend on that holds the data for all your forms.
This way you can set up a watch in your directive that will call whatever method on your shared service to validate / invalidate forms on your other tabs.
I hope this helps

Angular uibModal, Resolve, Unknown Provider

I am trying to expose a "generic" modal - using Angular's $uibModal - through a service. Here is the definition of that service:
angular.module('app').service('CustomModalService', ['$uibModal', function ($uibModal) {
var openCustomModal = function (size, title, message) {
var actionToPerformOnConfirm = action;
var modalInstance = $uibModal.open({
templateUrl : 'templates/CustomModal.html',
size: size,
resolve: {
title: title,
message: message
}
});
};
return {
openCustomModal: openCustomModal
};
}]);
Nothing too complicated, above. However, it is not working. If I remove the resolve property from the object, the service works; however, if I include the resolve property, I get the Unknown Provider error originating from that property.
The documentation for the resolve property reads:
(Type: Object) - Members that will be resolved and passed to the
controller as locals; it is equivalent of the resolve property in the
router.
The objective is to be able to provide a template for the modal that utilizes these properties in its DOM, e.g. :
<div ng-controller="CustomModalController">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
{{message}}
</div>
<div class="modal-footer">
<button class="ad-button ad-blue" type="button" ng-click="confirmAction()"></button>
<button class="ad-button ad-blue" type="button" ng-click="cancelAction()"></button>
</div>
</div>
What am I missing that is causing this error to be thrown?

You have two problems:
You need to define the controller in your modal config
Your resolve object needs to be a map of string: function, where string is the name of the dependency that will be injected into your modal's controller, and function is a factory function that will be used to provide that dependency when the controller is instantiated.
Working example: JSFiddle
JavaScript
angular.module('myApp', ['ui.bootstrap'])
.controller('MyModalController', MyModalController)
.directive('modalTrigger', modalTriggerDirective)
.factory('$myModal', myModalFactory)
;
function MyModalController($uibModalInstance, items) {
var vm = this;
vm.content = items;
vm.confirm = $uibModalInstance.close;
vm.cancel = $uibModalInstance.dismiss;
};
function modalTriggerDirective($myModal) {
function postLink(scope, iElement, iAttrs) {
function onClick() {
var size = scope.$eval(iAttrs.size) || 'lg'; // default to large size
var title = scope.$eval(iAttrs.title) || 'Default Title';
var message = scope.$eval(iAttrs.message) || 'Default Message';
$myModal.open(size, title, message);
}
iElement.on('click', onClick);
scope.$on('$destroy', function() {
iElement.off('click', onClick);
});
}
return {
link: postLink
};
}
function myModalFactory($uibModal) {
var open = function (size, title, message) {
return $uibModal.open({
controller: 'MyModalController',
controllerAs: 'vm',
templateUrl : 'templates/CustomModal.html',
size: size,
resolve: {
items: function() {
return {
title: title,
message: message
};
}
}
});
};
return {
open: open
};
}
HTML
<script type="text/ng-template" id="templates/CustomModal.html">
<div class="modal-header">
<h3 class="modal-title">{{vm.content.title}}</h3>
</div>
<div class="modal-body">
{{vm.content.message}}
</div>
<div class="modal-footer">
<button class="ad-button ad-blue" type="button" ng-click="vm.confirm()">
confirm
</button>
<button class="ad-button ad-blue" type="button" ng-click="vm.cancel()">
cancel
</button>
</div>
</script>
<button modal-trigger size="'sm'" title="'Hello World!'" message="'This is a test'">
Click Me
</button>

Call 2 functions in single ng-click

I am calling two functions on ng-click. But it doesn't work. I am not sure why the Refresh1() is not called when I cross-checked through debugger.
HTML CODE
<div class="row" ng-controller="PublishManifestCtrl">
<div class="col-xs-12 col-md-12">
<div class="widget">
<div class="widget-header bordered-bottom bordered-themeprimary">
<i class="widget-icon fa fa-tasks themeprimary"></i>
<span class="widget-caption themeprimary">Manifest Status</span>
</div>
<div class="widget-body">
<form class="form-bordered" role="form">
<div class="form-group">
<label style="padding-left: 8px;">Manifest was last published to agents on <b>{{manifeststatus.manifestLastPublishedDate}}</b>.</label>
</div>
<div class="form-group">
<label style="padding-left: 8px;">Manifest was last updated by <b> {{manifeststatus.lastUpdatedByUser}} </b> on <b>{{manifeststatus.manifestLastedUpdatedDate}}</b>.</label>
</div>
<div class="form-group">
<div class="col-sm-offset-1">
**<button id="PublishButton" class="btn btn-default shiny " ng-disabled="manifeststatus.enablePublishButton" ng-click="Save(manifeststatus);Refresh1()">Publish</button>**
</div>
<br/>
<div id="statusDivPublish" ng-show="showstatus">
<alert type="{{alert.type}}">{{alert.msg}}</alert>
</div>
</div>
</form>
</div>
JSFILE
$scope.Save = function (data) {
debugger;
$http.post($rootScope.WebApiURL + '/updatemanifeststatus');
//$http.get({ url: $rootScope.WebApiURL + '/getmanifeststatus' });
$scope.manifeststatus = data;
$scope.showstatus = true;
$scope.alert = { type: 'success', msg: 'Published Successfully.' };
$(".statusDivPublish").show();
}
$scope.Refresh1 = function () {
//refresh
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
}
});
new code
$scope.Save = function (data) {
debugger;
$http.post($rootScope.WebApiURL + '/updatemanifeststatus');
//$http.get({ url: $rootScope.WebApiURL + '/getmanifeststatus' });
$scope.manifeststatus = data;
$scope.showstatus = true;
$scope.alert = { type: 'success', msg: 'Published Successfully.' };
$(".statusDivPublish").show();
$scope.Refresh1();
}
$scope.Refresh1 = function ($rootScope, $state, $stateParams) {
debugger;
return {
restrict: 'AC',
link: function (scope, el, attr) {
el.on('click', function () {
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
});
}
};
};
});
The first one updates and displays a successfull message, while the second function refreshes the page.

use this
$scope.Save = function (data) {
debugger;
$http.post($rootScope.WebApiURL + '/updatemanifeststatus');
//$http.get({ url: $rootScope.WebApiURL + '/getmanifeststatus' });
$scope.manifeststatus = data;
$scope.showstatus = true;
$scope.alert = { type: 'success', msg: 'Published Successfully.' };
$(".statusDivPublish").show();
$scope.refresh();
}
call refresh inside the first function and remove it from the ng-click.
Update
You have a different type of problem i had it too. you try to refresh a state inside a method, it's really difficult i solve that problem with this snippet
if($state.current.name == /*name of the current state*/) {
$state.go($state.current, {}, {reload: true});
$modalInstance.close();
}
else {
$modalInstance.close();
$state.go(/*name of the current state*/);
}
it's not difficult but it didn't behave like you have understand it.
UPDATE
taking your code
$scope.Refresh1 = function () {
//refresh
$state.go($state.current, {}, {reload: true});
}

What about calling refresh inside of save in $http handler ?
Like this:
$http.post($rootScope.WebApiURL + '/updatemanifeststatus')
.then(function(){
$scope.Refresh1();
});

Don't execute two function in one ng-click, instead add the Refresh1 call to the end of the Save call, like so.
HTML
<button id="PublishButton"
class="btn btn-default shiny "
ng-disabled="manifeststatus.enablePublishButton"
ng-click="Save(manifeststatus)">Publish</button>
JS
$scope.Save = function (data) {
debugger;
$http.post($rootScope.WebApiURL + '/updatemanifeststatus');
//$http.get({ url: $rootScope.WebApiURL + '/getmanifeststatus' });
$scope.manifeststatus = data;
$scope.showstatus = true;
$scope.alert = { type: 'success', msg: 'Published Successfully.' };
$(".statusDivPublish").show();
$scope.refresh();
}
Update
If you are using AngularJS V1.2.2 or higher, then using ui-router, the following should work to reload the data.
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
The shortest way to accomplish this though would be with:
$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams
Its also worth noting that none of these will actually reload the page. If you want to reload the state AND the page, there is no ui-routermethod for it. Do window.location.reload(true)
Update 2
If you are receiving:
$state is not defined at Scope.$scope.Refresh1
(publishmanifest.js:44) at Scope.$scope.Save (publishmanifest.js:37)
at $parseFunctionCall (angular.js:12345) at angular-touch.js:472 at
Scope.$eval (angular.js:14401) at Scope.$apply (angular.js:14500) at
HTMLButtonElement. (angular-touch.js:471) at
HTMLButtonElement.n.event.dispatch (jquery.min.js:3) at
HTMLButtonElement.r.handle (jquery.min.js:3)
You are not injecting the $state service in your controller. You must do this in order to use it.
//without annotation (inferred, not safe when minifying code)
function Controller($scope, $state) {...}
//inline annotation
module.controller('Controller', ['$scope','$state', function($scope, $state) {...}]);
//$inject property annotation
function Controller($scope, $state) {...}
Controller.$inject = ['$scope', '$state'];
Pick one of the methods above to setup your controller to use $state.

Just make a third function like:
function3(data) {
save(data);
refresh1();
}