i have created menu directive like this in app.js.
.directive('menuShow', function () {
return {
restrict: 'EA',
templateUrl: 'shared/menu.html',
}
});
Directive is used in index page as:
<menu-show ></menu-show>
Now, i want to write functionality code which will be used in menu.html directive.
how to write controller for menu.html.
You can create a controller for your directive and set this in directive,
.directive('menuShow', function () {
return {
restrict: 'EA',
templateUrl: 'shared/menu.html',
controller: menuCtrl,
controllerAs: 'test',
bindToController: true
}
});
Related
I have a directive defined this way:
angular
.module('ui-abc', [ 'xyz'])
.directive('computer', compute);
function compute( item) {
return {
restrict: "EA",
templateUrl: '../elements/src/template.html',
scope:{ qwerty : '=',}
controller: ['$scope','$sce', {
.........
}
The controller does not have a name, how can i add one ? I need this name so that I can refer to that controller inside my ui-router configuration. I tried to do this
function compute( item) {
return {
restrict: "EA",
templateUrl: '../elements/src/template.html',
controller: "controllerName"
}
app.controller("controllerName", function(){......
....
App is not defined in this module, it is defined in the main app.js controller file.
So, it does not work, what do I have wrong?
here, you app will be - var app = angular.module('ui-abc', [ 'xyz']);
And don't use controller: "something", if you don't have one. It'll be fine if you just skip that line.
In your directive you can put a parameter called controllerAs
directive.js
function compute( item) { return {
restrict: "EA",
templateUrl: '../elements/src/template.html',
controller: 'controllerName',
controllerAs: 'vm'
};}
you can now call the controller as vm in your template.html
template.html
<body><h1>{{ vm.variableName }}</h1></body>
You can add the param called 'controllerAs' as below:
function compute( item) {
return {
restrict: "EA",
templateUrl: '../elements/src/template.html',
controller: "controllerName",
controllerAs: 'cName'
};
}
I have following directive structure.
<test-widget-body>
<test-task-list-filter>
</test-task-list-filter>
<test-task-list>
<test-datatable config="dtConfig" columns="dtColumns" api="dtApi"></test-datatable>
</test-task-list>
</test-widget-body>
Here are respective directives:
test-datatable
angular.module('testDatatable').directive('testDatatable', function () {
var directive = {
controller: 'testDatatableController',
restrict: 'E',
replace: true,
scope: {
config: '=',
columns: '=',
api: '=',
},
link: lnkFunction,
template: '<table class="table"></table>',
};
return directive;
}
testTaskList
angular.module('testTask').directive('testTaskList', function () {
return {
transclude: true,
restrict: 'E',
controller: 'testListController',
controllerAs: 'vm',
templateUrl: '/app/test/directives/test-list/test-list.html',
link: {
pre: preLink
}
};
function preLink(){
var dtColumns = [{
----
}];
var dtConfig =[];
var dtApi =[];
}
}
testTaskListFilter
angular.module('testTask').directive('testTaskListFilter', function () {
return {
restrict: 'E',
controller: 'testListFilterController',
templateUrl: '/app/test/directives/test-list/test-list-filter.html'
};
});
testWidgetBody
angular.module('testWidgetGrid').directive('testWidgetBody', function () {
return {
templateUrl: 'test.html',
link: function ($scope, element) {
}
}
Here I'm able to access dtConfig dtColumns dtApi objects inside testListFilterController controller.
How is this possible as <test-task-list-filter> and <test-task-list> are siblings.
Can anyone explain what is happening in this scenario.
Note: I'm able to access that object when I perform some click action not while directive rendering.
If you look at the declarations for testTaskListFilter directive and the testTaskList directive, neither of them have isolate scopes. You can declare isolate scopes by doing one of the following in the directive: scope: true or scope: {} (like in your testDatatable) directive.
Thus, any directive that does not declare its own scope inherits its parent's. So, testTaskListFilter and testTaskList are both using the same scope. This means that you're then able to
access dtConfig dtColumns dtApi objects inside testListFilterController controller
Here's the Angular wiki post for understanding scopes and scope inheritance
I have two directives and I wanted it to use it like so:
<m-list m-searchable></m-list>
So the two directives were m-list and m-searchable, now I want to access and manipulate the scope of the m-list when I attach the m-searchable directive.
I have this:
'use strict';
angular.module('app')
.directive('mList', function () {
return {
restrict: 'E',
scope: {},
controller: function($rootScope) {
var vm = this;
vm.name = 'joey';
},
controllerAs: 'ctrl',
bindToController: true,
templateUrl: '...'
};
});
And my m-searchable looks like this:
angular.module('app')
.directive('mSearchable', function () {
return {
restrict: 'A',
scope: {},
controllerAs: 'ctrl',
bindToController: true,
replace: true,
controller: function($rootScope, $scope) {
// I want console.log the scope of the directive where I attached the `m-searchable`
}
};
});
I want to console.log the scope of the directive where I attached the m-searchable. How do I access vm.name?
Firstly i think you will encounter $compile error due to both directive try to have their own isolated scope on the same element.
https://docs.angularjs.org/error/$compile/multidir?p0=mList&p1=mSearchable&p2=new%2Fisolated%20scope&p3=%3Cm-list%20m-searchable%3D%22%22%3E
Updated : better approach as suggested at http://juristr.com/blog/2015/01/learning-ng-directives-access-scope-controller/
is to pass the object between controller & directive
<m-list m-searchable name="name"></m-list>
app.directive('mList', function () {
return {
restrict: 'E',
scope: { name: "="},
controller: function($rootScope, $scope) {
var vm = this ;
vm.name = 'joey';
},
controllerAs: 'ctrl',
bindToController: true
};
});
http://plnkr.co/edit/OKVicRzjuH6L0xedF2qB?p=preview
Here is a directive that is loading new Template from file:
.directive('candidatesFilter', function(){
return {
resctict: 'E',
replace: true,
templateUrl: 'views/directives/filters/AAAA.html'
}
})
Next HTML-element calls this directive from the other HTML-Template (e.g. xxx.html):
<candidates-filter></candidates-filter>
There is next controller for this parent Template (xxx.html):
app.controller('candidatesController', function($scope, $location ){
$scope.addPeson = function() {
$location.url('/candidate/0');
};
});
Method addPerson() is not accessible inside the Directive's template AAAA.html, because
data-ng-click="addPerson()"
is not working there. How to change the Directive to make addPerson() method available inside the directive's template?
TEMPORARY Solution
I fixed this issue by next solution
.directive('candidatesFilter', function(){
return {
resctict: 'E',
replace: true,
templateUrl: 'views/directives/filters/AAAA.html',
controller: function(){
$('button.add').on('click',function(){
location.hash = '#/candidate/0';
});
}
}
})
If I understand the problem correctly:
You can pass a function into the directive for it to use
<candidates-filter></candidates-filter>
becomes
<candidates-filter add-candidate="addPerson()"></candidates-filter>
and the directive definition changed as follows:
.directive('candidatesFilter', function() {
return {
resctict: 'E',
replace: true,
scope: {
addCandidate: '&addCandidate'
}
templateUrl: 'views/directives/filters/AAAA.html'
link: function(scope, element, attrs) {
scope.someFunctionInDirective = function() {
scope.addCandidate();
}
};
}
})
Alternatively you can call it with the ng-click like normal from the button
Hope this helps clarify it?
I'm using a directive with an ng-repeat
<page ng-repeat='page in pages' id='{{page.id}}' title='{{page.title}}'></page>
And my directive :
app.directive('page', function(){
return {
restrict: 'EA',
scope: {
id: '#',
title: '#'
},
templateUrl: 'views/tpl/page.html',
controller: 'PageController'
});
Is there any way to avoid having to pass in manually all the attributes into the directive's isolate scope ? My goal would be to populate the directive's scope automatically with every attribute in the "page" object.
Thanks !
You can pass the whole page object. Directives Guid
html:
<page ng-repeat='page in pages' page-object='page'></page>
js:
app.directive('page', function(){
return {
restrict: 'EA',
scope: {
pageObject: '='
},
templateUrl: 'views/tpl/page.html',
controller: 'PageController'
});