angularjs: vm is undefined, when using contronllerAs syntax in directive - javascript

I can not access the vm.screensize property from the relevant controller. The error I am receiving is the vm is not defined. Below are the directive and controller.
angular.module('app.ain.directives')
.directive('ainProjectWizardExplanations', function() {
return {
restrict: 'E',
bindToController: true,
scope : {
sidenavHidden : '='
},
controller: 'ProjectWizardExplanationsController as vm',
templateUrl: function() {
console.log(vm.screensize, vm.animate);
if(vm.screensize) {
return 'app/ain/shared/directives/projectWizardExplanationsMobile.html';
}else {
return 'app/ain/shared/directives/projectWizardExplanations.html';
}
}
};
});
//controller
angular
.module('app.ain.directives')
.controller('ProjectWizardExplanationsController', ProjectWizardExplanationsController);
function ProjectWizardExplanationsController($mdMedia,$scope,$rootScope, $timeout) {
var vm = this;
vm.animate = true;
$scope.$watch(function() { return $mdMedia('sm'); }, function(small) {
vm.screensize = small;
});
}

Try setting the "controllerAs" option when declaring the directive instead.
.directive('ainProjectWizardExplanations', function() {
return {
restrict: 'E',
bindToController: true,
scope : {
sidenavHidden : '='
},
controller: 'ProjectWizardExplanationsController',
controllerAs: 'vm',
templateUrl: function() {
console.log(vm.screensize, vm.animate);
if(vm.screensize) {
return 'app/ain/shared/directives/projectWizardExplanationsMobile.html';
}else {
return 'app/ain/shared/directives/projectWizardExplanations.html';
}
}
};
});
Hope that works for you :)

Related

Angular js- How to call directive methods inside controller?

I have the directive named "student" and the problem is that i m not able to access the methods inside the directive,for instance i have to call the method "setText" in my controller,how do i do it?
angular.module('sampleApp')
.directive('student', ['appConfig', '$filter', function(appConfig, $filter) {
var template = appConfig.DIRECTIVE_BASE_URL +'/demo/student.html';
return {
restrict: 'E',
replace: true,
controller: ['$scope', function($scope) {
$scope.setText = function(a){
if(a.type === 'manual'){
return 'Manually Placed';
} else {
return '';
}
};
}],
scope: {
studentData: '=',
studentName: '='
},
templateUrl: template
};
}]);
You can define setText inside of student directive.
angular.module('sampleApp')
.directive('student', ['appConfig', '$filter', function(appConfig, $filter) {
var template = appConfig.DIRECTIVE_BASE_URL +'/demo/student.html';
const setText = function(a) {
if(a.type === 'manual') {
return 'Manually Placed';
} else {
return '';
}
};
return {
restrict: 'E',
replace: true,
controller: ['$scope', function($scope) {
$scope.setText = setText;
}],
scope: {
studentData: '=',
studentName: '='
},
templateUrl: template
};
}]);

Unknown provider: $uibModalProvider <- $uibModal <- modalPopDirective

I am using Angular's $uibModal and trying to create popup while page has been loaded. It is not working. I think problem in directive. This is my code:
angular.module('myModule', ['ui.bootstrap'])
.directive('modalPop', ModalDirective)
.controller('ModalController', ModalController);
function ModalDirective($uibModal) {
return {
scope: {},
restrict: 'E',
templateUrl: 'directives/modal/tutorial.html',
controller: function () {
return $uibModal.open({
controller: 'ModalController',
windowClass: 'outside ' + size,
animation: true,
templateUrl: './client/dialogs/' + template + '.html',
resolve: {
dialogParams: function () {
return {
title: 'title',
message: 'message'
};
}
}
});
}
};
}
function ModalController($uibModalInstance) {
$scope.close = function () {
$uibModalInstance.dismiss();
};
}
How can I get this to work?
You are not injecting the provider into the directive's controller. Also try explicitly injecting the provider into the directive:
ModalDirective.$inject = ['$uibModal'];
function ModalDirective($uibModal) {
return {
scope: {},
restrict: 'E',
templateUrl: 'directives/modal/tutorial.html',
controller: function ($uibModal) {
return $uibModal.open({
controller: 'ModalController',
windowClass: 'outside ' + size,
animation: true,
templateUrl: './client/dialogs/' + template + '.html',
resolve: {
dialogParams: function () {
return {
title: 'title',
message: 'message'
};
}
}
});
}
};
}
If that doesn't work, then you have not properly included the JS file for Angular UI Bootstrap. (This is most likely the cause)

communication between nested directives not working

I have a directive Foo in Directive Bar i am trying to call a function in Foo
but it is not working.
http://jsfiddle.net/4d9Lfo95/3/
example fiddle is created.
angular.module('ui', []).directive('uiFoo',
function() {
return {
restrict: 'E',
template: '<p>Foo</p>',
link: function($scope, element, attrs) {
$scope.message = function() {
alert(1);
};
},
controller: function($scope) {
this.message = function() {
alert("Foo Function!");
}
}
};
}
).directive('uiBar',
function() {
return {
restrict: 'E',
template: '<button ng-click="callFunction()">Bar</button> <ui-foo></ui-foo>',
require: 'uiFoo',
scope: true,
link: function($scope, element, attrs, uiFooController) {
$scope.callFunction = function() {
alert('Bar Function');
uiFooController.message();
}
}
};
}
);angular.module('myApp', ['ui']);
where as the UI looks like this
<div ng-app="myApp"> <ui-bar> </ui-bar></div>
You left out this error message:
Controller 'uiFoo', required by directive 'uiBar', can't be found!
The problem is that the require hierarchy searches up the tree, not down it. So, ui-bar is trying to find a uiFoo directive controller either on itself or (with the ^ symbol) in one of it's ancestors, not one of it's children.
If you want to call a method from the child directive, just use the scope: http://jsfiddle.net/4d9Lfo95/5/
angular.module('ui', []).directive('uiFoo',
function() {
return {
restrict: 'E',
template: '<p>Foo</p>',
controller: function($scope) {
$scope.message = function() {
alert("Foo Function!");
}
}
};
}
).directive('uiBar',
function() {
return {
restrict: 'E',
template: '<button ng-click="callFunction()">Bar</button> <ui-foo></ui-foo>',
scope: true,
controller: function($scope) {
$scope.callFunction = function() {
alert('Bar Function');
$scope.message();
}
}
};
}
);

How to access controller functions in directive link?

How to access directive controller functions from directive link? Bellow controller passed to link is empty, I would like to get in it show() hide() functions.
My current directive:
app.directive('showLoading', function() {
return {
restrict: 'A',
// require: 'ngModel',
scope: {
loading: '=showLoading'
},
controller: function($scope, $element) {
return {
show: function() {
alert("show");
},
hide: function() {
alert("hide");
}
};
},
link: function($scope, $element, $attrs, controller) {
$scope.$watch('loading', function(bool) {
if (bool) {
controller.show();//undefined
} else {
controller.hide();
}
});
}
};
});
Publishing on the scope can work, but not the best practice, since it "pollutes" the scope. The proper way to communicate with own controller is to require it - then it will become available as a parameter to the link function, along with other required directives.
The other issue is with how you expose functions on the controller - this is done by using this.someFn, not by returning an object.
app.directive('showLoading', function() {
return {
restrict: 'A',
require: ['ngModel', 'showLoading'], // multiple "requires" for illustration
scope: {
loading: '=showLoading'
},
controller: function($scope, $element) {
this.show = function() {
alert("show");
};
this.hide = function() {
alert("hide");
};
},
link: function($scope, $element, $attrs, ctrls) {
var ngModel = ctrls[0], me = ctrls[1];
$scope.$watch('loading', function(bool) {
if (bool) {
me.show();
} else {
me.hide();
}
});
}
};
});
You have some kind of problem inside of controller function
Here is code working fine
app.directive('showLoading', function() {
return {
restrict: 'AE',
// require: 'ngModel',
scope: {
loading: '=showLoading'
},
controller: function($scope, $element) {
$scope.show = function() {
alert("show");
},
$scope.hide = function() {
alert("hide");
}
},
link: function($scope, $element, $attrs) {
$scope.$watch('loading', function(bool) {
if (bool) {
$scope.show();//undefined
} else {
$scope.hide();
}
});
}
};
});

Call a method from one controller defined inside directive in another controller : AngularJS

I have a directive in which controller exists, where i have a function. I need to call that function from another controller.
Directive :
angular.module('test.directives').directive("manageAccess", function() {
return {
restrict: "E",
replace: true,
templateUrl: "template/test.html",
controller: function($scope, $element, $http) {
$scope.getRoles = function() {
console.log('hi');
};
}
};
});
$scope.getRoles method is the method i need to call from different controller.
Controller:
angular.module("test.controllers").controller("testController", function($scope, $http) {
$scope.getUsers = function() {
// i need to call getRoles method here
}
});
How can i do that?
Please help,
Thanks.
You can use AngularJS Service/Factory
I put the getRoles function within the factory for the API which can be injected anywhere.
Working Demo
var RolesModule = angular.module('UserRoles', []);
RolesModule.factory('RolesAPI', function() {
return {
getRoles: function() {
this.roles = 'my roles';
console.log('test');
}
}
});
angular.module("test.controllers",['UserRoles'])
.controller("testController",function($scope,$rootScope,RolesAPI, $http) {
$scope.getUsers = function() {
RolesAPI.getRoles();
}
});
angular.module('test.directives',['UserRoles'])
.directive("manageAccess", function() {
return {
restrict: "E",
replace: true,
templateUrl: "template/test.html",
controller: function($scope, $element, $http) {
}
};
})
Try following
angular.module('test.directives').directive("manageAccess", function() {
return {
restrict: "E",
replace: true,
scope: {getRoles: '='},
templateUrl: "template/test.html",
controller: function($scope, $element, $http) {
$scope.getRoles = function() {
console.log('hi');
};
}
};
});
controller
angular.module("test.controllers").controller("testController", function($scope, $http) {
$scope.getUsers = function() {
// i need to call getRoles method here
$scope.getRoles()
}
});
in html
<manage-access get-roles="getRoles"></manage-access>
If the function is not dependent on the directive elements, move that to a service pass it to both directive and the testcontroller.

Categories