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'
});
Related
If I have two directives, one that's a table, and one that's a row. In this case the row is the same each time, and I just want to have it displayed twice in the index.html. <table-row> works in the index.html, but <table> does not why?
i.e.:
.directive('table', function() {
return {
restrict: 'E',
scope: {},
controller: 'table-ctrl',
controllerAs: 'ctrl',
bindToController: true,
template:`
<div>
<table-row></table-row>
<table-row></table-row>
</div>`
};
});
Table Row:
.controller('TableRowCtrl', function() {
this.toggle = function() {
this.toggleBool = !this.toggleBool;
}
//
this.toggleBool = false;
})
.directive('TableRow', function() {
return {
scope: {},
restrict: 'E',
replace: true,
controller: 'TableRowCtrl',
controllerAs: 'ctrl',
bindToController: true,
template: `
<div>
<span>Object</span>
<span>
<img ng-click="ctrl.toggle()" src="jpeg file" />
</span>
<span ng-if="ctrl.toggleBool"> Print </span>
</div>`
};
});
If table-row is the other directive that does everything and its controller is also what runs on clicks etc, how would I link in the table-row directive so that the table directive template works, and will call table-row multiple times.I would like to continue using the ControllerAs syntax instead of $scope.
It doesn't matter if you want to use controllerAs or not. From your code table directive has isolate scope and suppose if you want to iterate through table-row items by using ngRepeat directive it should be isolate scope as well.
Remember that every ngRepeat's item has own scope
For example:
.directive('table', function() {
return {
restrict: 'E',
scope: {},
controller: 'table-ctrl',
controllerAs: 'ctrl',
bindToController: true,
template:
<div ng-repeat="item in ctrl.items">
<table-row item="item"></table-row>
</div>`
};
});
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
}
});
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 read some posts here on so regarding this subject but all the answers and all of the fiddles I saw not one working properly. I got my plunkr to bind one-way from the dynamically generated field bound through ng-model inside an directive isolated scope to the form in the parent. However is does not bind from the form back to the directive. My initial values are disregarded, so are the changes I make inside the parent scope and I would really like a solution. Here's a code fragment.
<div ng-repeat="field in fields">
<app-field field="field" ng-model="selected[field.name]" form="form"></app-field>
</div>
...
.directive("appField", function($http, $compile) {
return {
restrict: "AE",
scope: {
field: "=",
ngModel: "=",
form: "="
},
link: function($scope, element, attrs) {
$http.get("field.html").then(function (result) {
element.html(result.data);
$compile(element.contents())($scope);
});
}
}
})
Here's my fiddle: http://plnkr.co/edit/ZzC4jS9M9Ev5i6gxUVxB?p=preview
Any help would be appreciated.
The property is scope, not $scope. Then, remove the scope:false and you are done!
Also, you can use the templateUrl property instead of link (in this case):
.directive("appField", function($http, $compile) {
return {
restrict: "AE",
scope: {
field: "=",
ngModel: "=",
form: "="
},
templateUrl: 'field.html'
}
})
I am working on multiple directive, this is already existing framework so I dont want to disturb the existing components.
This is my HTML
<div title="test" mydirective>
This is my directive, this has templateUrl with it and this template has another directive getting loaded.
.directive('myDirective', function ($filter) {
restrict: 'A',
replace: true,
transclude: true,
scope: {
title: '#'
},
templateUrl: 'partial/partialtemplate.tpl.html'
});
My Partial Template html looks like this
<div newdirective title="{{title}}"></div>
This is my newdirective
.directive('newDirective', function ($filter) {
restrict: 'A',
replace: true,
transclude: true,
scope: {
title: '#'
},
templateUrl: 'partial/newpartialtemplate.tpl.html',
controller: function ($scope, $attrs) {
//here if I try to print my title I still get {{title}}
console.log($attrs.title);
}
});
So what could the issue be, I the second directive being called even before the template data is written or anything wrong?