So I have this directive that has its own scope but I want to access to a function inside its parent controller. I can do this if the parent controller exposes the function with a $scope.getElementsList(), although I'm trying to avoid the use of $scope and I have the function exposed with self.getElementsList() and the directive cannot reach it.
Directive:
angular.module('myApp').directive('accountBalance', function() {
return {
scope: {
elementId: '=elementid'
},
transclude: true,
restrict: 'E',
templateUrl: '../views_directives/account-balance.html',
controller: function($scope) {
$scope.removeElement = function(){
//this where I want to access the parent function
console.log($scope.$parent.getElementsList());
console.log("ALSO I WANT TO ACCESS THIS DIRECTIVE elementId WITHOUT USING $scope", $scope.elementId);
}
}
};
});
ParentController:
angular.module('myApp').controller('AppDesignCtrl', function ($scope) {
var self = this;
self.elementsList = [];
self.getElementsList = function(){
return self.elementsList;
}
});
I also want to know what is the best way to access, inside the directive controller, the data passed to the directive's $scope.
scope: {
elementId: '=elementid'
},
UPDATE
<div>
<i class="fa fa-arrows element-drag"></i>
<i class="fa fa-trash-o element-remove" ng-click="removeElement()"></i>
</div>
And what about calling functions from the directive template inside the controller of the directive? Do I need to expose them with something like $scope.removeElement()? How do I use this.removeElement() and be able to access it from the template?
Sorry about the long question. I'm trying to set the best practices to my new project since I've been away from angular for a year+.
Thanks in advance
(Going from bottom to top...)
To call functions in the controller without using the scope in Angular >= 1.2, use the controllerAs syntax:
<div ng-controller="AppDesignCtrl as appDesignCtrl">
...
<i class="fa fa-trash-o element-remove" ng-click="appDesignCtrl.removeElement()"></i>
</div>
And removeElement() must be a method of the controller:
angular.module('myApp').controller('AppDesignCtrl', function ($scope) {
...
this.removeElement = function() {
...
};
});
To access the scope data from the controller in Angular >= 1.3, use the new bindToController: true configuration (this is especially useful when combined with the new controllerAs syntax):
angular.module('myApp').directive('accountBalance', function() {
return {
...
scope: {
elementId: '=elementid'
},
controller: function() {
// now elementId is a member of the controller:
console.log(this.elementId);
}
};
});
Having said these, the answer to how you can call getElementsList from the directive would be:
angular.module('myApp').directive('accountBalance', function() {
return {
...
scope: {
elementId: '=elementid',
getElementList: '&'
},
controller: function() {
...
// invoking the expression that was passed to us
var theElements = this.getElementList();
}
};
});
The correct expression should be passed as:
<div ng-controller="AppDesignCtrl as appDesignCtrl">
<account-balance element-id="xxx"
get-elements-list="appDesignCtrl.getElementsList()"></account-balance>
</div>
It is generally not recommended, because directives are meant to be self-contained. It isn't critical if you don't plan to reuse the directive. And wise usage of isolate scope can solve this.
angular.module('myApp').directive('accountBalance', function() {
return {
scope: {
outerScope: '#'
elementId: '='
},
transclude: true,
restrict: 'E',
templateUrl: '../views_directives/account-balance.html',
controller: function($scope) {
console.log("we can use anything from other controller", $scope.outerScope.elementsList)
$scope.elementId = "and share data with any other scope";
}
};
});
Controller is defined as ng-controller="AppDesignCtrl as appDesign", and directive usage is
<account-balance element-id="sharedParentScopeVar" outer-scope="appDesign">
So there won't be any problem if the directive should be moved to other controller.
I guess 'best practice' may be to set up a service that embraces the data and is used by both app controller and directive, so directive controller operates on data items and not DOM elements.
And what about calling functions from the directive template inside
the controller of the directive? Do I need to expose them with
something like $scope.removeElement()?
You surely don't. If there's a need to use functions from outside, you're doing something wrong. Send a message to respective element to run the function if it is DOM-related. Or put the function into the service if it is data-related.
Related
viewBannerCtrl is the controller in that i'm using "customTable" directive
Here i'm not able to access "VBC.bannerAlert()" function from the directive
and i appended the code to directive but not able to access controller functions with append tag
.controller('viewBannerCtrl',function(){
vbc.bannerAlert = function(){
alert('success called in inside directive.....Hurry!!!!!!!!!!!!!!!!!!');
};
});
.directive('customTable', function customTable($compile) {
return {
restrict: 'EA',
templateUrl: 'app/admin/modules/common/views/custom_table.html',
scope: {
data: '=data',
dataLength: '=datalength',
filterDataArray: '=filterData',
imageData: '=imageData'
},
controller: customTableCtrl,
link:function(scope,element,attr){
var el = angular.element(document.getElementById('dyanamicActions'));
el.append('<button class="btn btn-danger btn-rounded btn-ef btn-ef-5 btn-ef-5b" ng-click="VBC.bannerAlert()"><i class="fa fa-trash"></i> <span>Deletess</span></button>');
$compile(el)(scope);
},
controllerAs: 'CTC',
bindToController: true
};
});
function customTableCtrl(MainService) {
var ctc = this;
};
}
<div custom-table data="VBC.getBannerlistData" datalength="VBC.totalItems"
table-headers="VBC.tableInit" image-data="'image'"
table-actions="VBC.editData" delete-model="VBC.openBannerDeleteModal">
</div>
You current directive has implemented using isolated scope like scope: { ... }. So directive don't have outer scope methods are available in it(didn't follow prototypal inheritance when scope are isolated).
You have to pass bannerAlert function expression to directive from its isolated scope using &. So that that function will get available inside directive scope.
For passing that function to directive you have to write attribute bannerAlert="bannerAlert()" on directive element. Like I've shown below.
Markup
<div custom-table data="VBC.getBannerlistData"
datalength="VBC.totalItems"
table-headers="VBC.tableInit"
image-data="'image'"
table-actions="VBC.editData"
delete-model="VBC.openBannerDeleteModal"
bannerAlert="bannerAlert()">
</div>
Code
scope: {
data: '=data',
dataLength: '=datalength',
filterDataArray: '=filterData',
imageData: '=imageData',
bannerAlert: '&bannerAlert' //<--added expression binding here
},
I have two directives: directiveA and directiveB, hanging from the same module in my AngularJS application.
They are called at the same level in the same HTML template, so we could say they are brothers.
<directive-a>
<directive-b>
Both of them have an own method hanging from its scope, like this:
$scope.clickOkey = function () {
... whatever
};
They both have a 'clickOkey' method, but their behaviours are different.
My problem comes out when I try to call the 'clickOkey' of directiveA from directiveA's template. It executes the 'clickOkey' from directiveB.
Inside directiveA's own template:
<label ng-click="clickOkey()">Okey</label>
They are placed at same level so there it shouldn't be way for them to share their $scope or misunderstanding methods.
Also, is important to say that if I change the method's name to 'clickOkeyA', for example, it takes the right method, so the template can access to its scope without problems.
What am I missing?
Thanks for your help!
Edit:
Both directives are isolated and have a controller, and inside each one of them is defined a 'clickOkey' method. There are two methods with the same name.
Both directives are like this:
angular.module('myModule').directive('directiveA', function () {
return {
restrict: 'AE',
templateUrl: '/whatever.html',
controller: function ($scope, $http, $rootScope) {
$scope.clickOkey = function () {
... whatever
};
}
}
});
You should add an isolated scope to your directives :
https://docs.angularjs.org/guide/directive
For your directive it would be :
angular.module('myModule').directive('directiveA', function () {
return {
restrict: 'AE',
templateUrl: '/whatever.html',
scope : {},
controller: function ($scope, $http, $rootScope) {
$scope.clickOkey = function () {
... whatever
};
}
}
});
So I want to create a nested struture on my nested scope inside a directive like this:
angular.module('myAddress').directive('myAddress', [function () {
return {
restrict: 'AE',
controller: 'myAddressController',
templateUrl: 'my-address.html',
scope: {
address: {
'form': '=addressForm',
'model': '=addressModel'
}
}
};
}]);
But I get an exception that undefined is not a function that I don't get if I remove the address nesting.
How do I put attribute arguments inside a named key on my scope?
Also, If I define $scope.address via the controller it doesn't work as well. But what will execute first? The scope: { 'form' = 'addressForm'} part in my directive or the controller's $scope.form?
With the scope property you define which $scope variables should pass to the directive scope and the type of data-binding.
If you want to create an nested structure within the directive $scope, you could create it in the directive controller function.
For example:
angular.module('myAddress').directive('myAddress', [function () {
return {
restrict: 'AE',
controller: 'myAddressController',
templateUrl: 'my-address.html',
scope: {
addressForm: '=', // Two-way databinding
addressModel: '='
},
controller: function($scope){
$scope.address = {
form: $scope.addressForm,
model: $scope.addressModel
}
},
link: function($scope,$element,$attributes){
//Your code here
}
};
}]);
You can also, define $scope.address in the module controller scope. Then your scope property in the directive should be look like this
scope: {
address: '='
}
UPDATE:
Another question is: Does your directive need an dedicated scope? If not you could set the scope property false. Then your directive can access the $scope variables in your module controller.
i have global function in helper service.
this.displayModalWithInput = function ($scope, title, cotroller, functionCallback) {
$scope.modalProperties = {
modalTitle : title,
modalController : cotroller,
modalFunction : functionCallback
};
$('#myModal').modal();
};
In my template i have standard Bootsrap modal window. Problem is if i'm trying to access to scope using:
{{modalProperties.modalTitle}}
Nothing is displayed.
How can in solve it, if i want to use global available function and pass data from this global function into accessible scope?
Thanks for any advice.
first define $scope.modalProperties=[]; in your controller.
Then, when you call displayModalwithInput function from controller, there please pass $scope as one of arguments. e.g. displayModalwithInput($scope, ...)
if it doesn't work, i'd like to see your global service code.
Services (factories) are singletons and its not good practice (I would say you can't) to inject scope to service.
In your case to avoid code duplicate I would create directive instead (isolate scope) where in link function you can write all relevant logic.
This Demo might help you PLUNKER
Directive Example
.directive( 'confirmPopup', function () {
return {
restrict: 'A',
replace: true,
scope: { title: '#', content: '#', placement: '#', animation: '&', isOpen: '&', func: '&' },
templateUrl: 'confirmPopup.html',
link: function ($scope, element, attrs) {
$scope.confirm = function(){
$scope.$parent.deleteThing();
$scope.$parent.tt_isOpen = false;
}
$scope.cancel = function(){
$scope.$parent.tt_isOpen = false;
}
}
};
})
I'm trying to access a method in a directive from translcuded content. My HTML looks like:
<typeahead class="typeahead" model="customers" filtered-model="customersfiltered" ng-model="selectedcustomer">
<ul>
<li ng-click="select(customer)" ng-repeat="customer in customersfiltered | filter:filter | limitTo:10">
{{customer.firstname}} {{customer.lastname}}
</li>
</ul>
</typeahead>
And my AngularJS directive:
directive('typeahead', function ($filter) {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
model: '=',
filteredModel: '='
},
template: '<div class="typeahead"><form><input type="text" autocomplete="off" class="col-lg-12" ng-model="filter"></form><div ng-transclude></div></div>', //
controller: function($scope){
$scope.filterArray = function(filterString){
$scope.filteredModel= $filter('filter')($scope.model, filterString);
}
$scope.clear = function(){
$scope.filteredModel = [];
}
$scope.$watch('filter', function(){
if($scope.filter) {
$scope.filterArray($scope.filter);
} else {
$scope.clear();
}
});
},
link: function ($scope, $element, $attributes) {
$scope.select = function(customer){
console.log("dwadad");
}
}
}
})
The problem here is that I cannot access the select() function inside the link function() from the ng-click event of the transcluded content (list-element).
Have somebody an idea how to solve this?
Here is a Plunker of the current code: Plunker
I think you can't do that. From the Angular docs:
(...) The advantage of transclusion is that the linking function receives a
transclusion function which is pre-bound to the correct scope. In a
typical setup the widget creates an isolate scope, but the
transclusion is not a child, but a sibling of the isolate scope. This
makes it possible for the widget to have private state, and the
transclusion to be bound to the parent (pre-isolate) scope.
In other words, the scope of the transcluded DOM is a sibling, not a child, of the directive's scope. So you can't access it from there, and I think that's correct. Otherwise you wouldn't be able to bind the transcluded content to the right scope.
You can use $$nextSibling:
link: function($scope) {
$scope.$$nextSibling.select = function(customer) {
alert('used isolated scope using $$nextSibling');
}
},