We Keep Coding

ngRepeat on custom directive tags

I have a list of custom directives which are different widgets on my dashboard. The directives are defined as follows:
angular.module('core').directive('graphCardWidget', function() {
return {
restrict: 'E',
replace: true,
scope: {
target: '=target'
},
templateUrl: 'modules/core/widgets/graph-card.client.widget.html'
};
});
angular.module('core').directive('pieChartWidget', function() {
return {
restrict: 'E',
replace: true,
scope: {
target: '=target'
},
templateUrl: 'modules/core/widgets/pie-chart.client.widget.html'
};
});
In my controller, I have a list of widgets to be displayed. The list is as follows:
$scope.dashboardWidgets = [
{
directive : 'graph-card-widget',
target : 'widgets.dashboards.activeDevicesCard'
},
{
directive : 'graph-card-widget',
target : 'widgets.dashboards.activeSessionsCard'
},
{
directive : 'pie-chart-widget',
target : 'widgets.dashboards.devices'
},
{
directive : 'pie-chart-widget',
target : 'widgets.dashboards.sessions'
}
];
Now in my view, I use ng-repeat to iterate this array and display the items. Here is the code of my view:
<div layout="row" layout-wrap layout-align="center" layout-xs="column" ng-drop="true">
<div ng-repeat='widget in dashboardWidgets'>
<{{widget.directive}} ng-drag="true" flex='45' target='{{widget.target}}'>
</{{widget.directive}}>
<span flex='5'></span>
</div>
</div>
But the browser renders this as text. Here is what I get in my DOM:
<div layout="row" layout-wrap="" layout-align="center" layout-xs="column" ng-drop="true" class="layout-wrap layout-xs-column layout-align-center-stretch layout-row">
<div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope">
“<graph-card-widget ng-drag="true" flex='45' target='widgets.dashboards.activeDevicesCard’>”
<span flex="5" class="flex-5"></span>
</div>
<div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope">
“<graph-card-widget ng-drag="true" flex='45' target='widgets.dashboards.activeSessionsCard’>”
<span flex="5" class="flex-5"></span>
</div>
<div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope">
“<pie-chart-widget ng-drag="true" flex='45' target='widgets.dashboards.devices’>”
<span flex="5" class="flex-5"></span>
</div>
<div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope">
“<pie-chart-widget ng-drag="true" flex='45' target='widgets.dashboards.sessions’>”
<span flex="5" class="flex-5"></span>
</div>
</div>
So what can I do to make the directive rendered as a tag and not plain text?
I saw a couple of questions similar to these such as, question 1, question 2 but they all are adding the dynamic directives in standard HTML tags. What I need is a dynamic tag.
Update:
After following #cnexans answer, I got it working partially. The widget is drawn but the target attribute is not evaluated which leads to a blank widget.
Here's the plunkr with the issue: https://plnkr.co/edit/BGN6C4LAHguWthU4fGy0?p=preview

You can use ng-if inside ng-for in order to switch the name "directive" within each iteration to show one or another directive.
<div ng-repeat="data in dashboardWidgets">
<div ng-if="data.directive == 'graph-card-widget'">
<graph-card-widget ng-drag="true" flex='45' target=data.target>
</graph-card-widget>
<span flex='5'></span>
</div>
<div ng-if="data.directive == 'pie-chart-widget'">
<pie-chart-widget ng-drag="true" flex='45' target=data.target>
</pie-chart-widget>
<span flex='5'></span>
</div>
</div>
You can create a container directive to take care of this logic too, so you can share this functionality to other pages if needed.
<widgets-container widgets-list=data></widgets-container>
Working example: https://codepen.io/anon/pen/jBzEpe?editors=1010#0
Edit:
Checking the example you gave, you need to pass a Widget object to the directive, and you are passing a string. Here is a working example forked from the plunkr given
https://plnkr.co/edit/3Oxxmp?p=preview
It has a function namespaceToObject which transform the string into the desired object from $scope.

don't know whether this will match your requirement. but i did some modification to your array.
I did this using ng-bind-html and when your are binding custom element like directive you need to compile it again. for that i create(actually borrow) this directive.
.directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.ngBindHtml);
function getStringValue() { return (parsed(scope) || '').toString(); }
//Recompile if the template changes
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
});
I changed the ng-repeat like this
<div ng-repeat='widget in dashboardWidgets' compile-template ng-bind-html="trust(widget.directive)">
<span flex='5'></span>
</div>
trust function will return trusted html
$scope.trust = function(someHTML){
return $sce.trustAsHtml(someHTML);
}
modify the array like this
$scope.dashboardWidgets = [
{
directive : '<graph-card-widget ng-drag="true" flex="45" target="widget.target"></ graph-card-widget>',
target : 'widgets.dashboards.activeDevicesCard'
},
{
directive : '<graph-card-widget ng-drag="true" flex="45" target="widget.target"></ graph-card-widget>',
target : 'widgets.dashboards.activeSessionsCard'
},
{
directive : '<pie-chart-widget ng-drag="true" flex="45" target="widget.target"></ pie-chart-widget>',
target : 'widgets.dashboards.devices'
},
{
directive : '<pie-chart-widget ng-drag="true" flex="45" target="widget.target"></ pie-chart-widget>',
target : 'widgets.dashboards.sessions'
}
];
Demo

Use directive with different controllers in AngularJS?

I have created a directive for a search box which i want to use with different views. Here is the directive -
angular.module('jobSeekerApp')
.directive('searchBoxDirective', function () {
return {
restrict: 'E',
templateUrl: 'templates/searchbox-template.html',
};
});
template for the directive -
<span class="searchButton"><i class="fa fa-search fa-2x"></i></span>
<input ng-change="search()" ng-model="searchTerm" ng-keydown="deleteTerm($event)" type="text" id="search-box" style="width: 0px; visibility:hidden;"/>
I want to use this directive on two views which look like this -
View 1 -
<div class="panel panel-default companies" ng-repeat="company in companies.companiesList">
<div class="panel-heading text-center"><a ng-href="/companies/{{company.id}}" class="hvr-sink"><h3 class="well">{{company.company_name}}</h3></a></div>
<div class="panel-body text-center flexcontainer">
<div>Location: {{company.location}}</div>
<div>Founded In: {{company.founded_year}}</div>
<div ng-if="company.opening">Opening: Yes</div>
<div ng-if="!company.opening">Opening: No</div>
<div>Number Of Openings: {{company.no_openings}}</div>
</div>
</div>
View 2 -
<div class="panel panel-default jobs" ng-repeat="job in jobs.jobsList">
<div class="panel-heading text-center"><h3 class="well">{{job.job_name}}</h3></div>
<div class="panel-body text-center flexcontainer">
<div>Company: {{job.company_name}}</div>
</div>
</div>
As you can see i am using aliases companies and jobs in my views, due to this my directive is not able to affect the view it is contained in. If i use the companies or jobs in my template , then it works fine. So for example if change the template to -
<span class="searchButton"><i class="fa fa-search fa-2x"></i></span>
<input ng-change="companies.search()" ng-model="companies.searchTerm" ng-keydown="companies.deleteTerm($event)" type="text" id="search-box" style="width: 0px; visibility:hidden;"/>
Then it works with the view associated with companies controller and similarly for jobs.
How can i use the directive with the respective controller instance?
Thank you.

Create a simple view for Search
Create it's own controller
Search record by this controller in service and put data in service variable
this.searchResult = [];
this.search = function(searchText){
// code to search
this.searchResult = Result;
}
Now where ever you want to use this result use the watch on this service variable in current controller, like:
$scope.$watch(function() { return servicename.searchResult ; }, function(newVal, oldval) {
if(newval != oldval){
$scope.data = servicename.searchResult;
/* Do the rest of stuff */
}
}, true);

Since the search function is asynchronous, I recommend avoiding the use of ng-change to invoke it. Instead use ng-click on the search icon.
<span class="searchButton" ng-click="$ctrl.searchFn()">
<i class="fa fa-search fa-2x"></i>
</span>
<input ng-model="$ctrl.searchTerm" type="text" id="search-box">
In the directive, use isolate scope and bindToController.
app.directive('searchBoxDirective', function () {
return {
restrict: 'E',
scope: { 'searchTerm': "=",
'searchFn': "&"
},
controller: function () {},
controllerAs: '$ctrl',
bindToController: true,
templateUrl: 'templates/searchbox-template.html'
};
});
Usage
<search-box-directive search-term="companies.searchTerm"
search-fn="companies.search()" >
</search-box-directive>
<search-box-directive search-term="jobs.searchTerm"
search-fn="jobs.search()" >
</search-box-directive>
The search-term attribute creates a bidirectional binding from parent scope to the directive isolate scope. The search-fn attribute creates an expression binding from parent scope to isolate scope.

Use isolate scope and explicitly pass the search term to your directive. Something like:
angular.module('jobSeekerApp')
.directive('searchBoxDirective', function () {
return {
restrict: 'E',
scope: {
searchTerm: '=' <-- you can use '#' if you don't need two-way binding
},
templateUrl: 'templates/searchbox-template.html',
};
});
You didn't show where you are actually using your directive, but you would pass the scope property through an attribute (this is using your directive on a <div>):
<div search-box-directive search-term="companies.searchTerm"></div>

AngularJs, accessing parent scope from directive inside a nested ng-repeat

That's a noob question. I'm looking for the correct way to access the parent scope inside a directive in a nested ng-repeat. This is exactly what i mean:
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="section in sections">
{{section.Name}}
<div ng-repeat="item in section.Items" ng-init="parent = section">
<span class="menuItem">{{item}}</span>
</div>
</div>
</div>
And the directive:
myApp.directive('menuItem', function () {
return {
restrict: 'C',
link: function (scope, element, attrs) {
console.log(scope.$parent.section.SectionId);
}
}
});
The directive is attached to an item in the inner ng-repeat, and i need to access a property of the parent object. The problem is that i cannot access directly to the parent properties (with scope.$parent), because ng-repeat creates a new scope, and i must append the name of the object i set in the ng-repeat (in this case scope.$parent.section.):
<div ng-repeat="section in sections">
console.log(scope.$parent.section.SectionId);
JsFiddle: http://jsfiddle.net/7Lra7Loy/2/
As i want the directive to be generic, so it can be used inside other ng-repeat blocks, without being forced to use the same names in the ng-repeat, the only way i found is to use an ng-init, that would be the same in all ng-repeat blocks (ng-init="parent = section"):
<div ng-repeat="section in sections">
{{section.Name}}
<div ng-repeat="item in section.Items" ng-init="parent = section">
<span class="menuItem">{{item}}</span>
</div>
</div>
myApp.directive('menuItem', function () {
return {
restrict: 'C',
link: function (scope, element, attrs) {
console.log(scope.parent.SectionId);
}
}
});
JsFiddle: http://jsfiddle.net/7Lra7Loy/1/
Is there a better way to handle this situation? Or am i just missing something? I searched a bit, but i couldn't find anything really useful.

Template:
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="section in sections">
{{section.Name}}
<div ng-repeat="item in section.Items">
<span class="menuItem" section="{{section}}">{{item}}</span>
</div>
</div>
</div>
And directive:
myApp.directive('menuItem', function () {
return {
restrict: 'C',
scope: {
section: '#' // text-binding
//section: '&' //one-way binding
//section: '=' //two-way binding
},
link: function ($scope, element, attrs) {
console.log($scope.section);
}
}
});
JsFiddle: https://jsfiddle.net/nrkmn/26zhqbjg/

AngularJS - Click event (in directive) triggers when anywhere in the parent is clicked

I'm going to do my best to explain my issue - bear with me.
This whole thing is a directive for file selection:
The directive has an ng-transclude component that contains a few directives, contained in their own divs.
Parent directive:
<div class="extra-cells">
<div ng-transclude class="extra-cells-row"></div>
</div>
ng-transclude content:
<div file-upload-directive>
<div bo-if="config.drive">
<div google-picker>
<div>Google Drive</div>
</div>
</div>
<div bo-if="config.dropbox">
<div dropbox-chooser>
<div>Dropbox</div>
</div>
</div>
<div bo-if="config.link">
<div ng-click="selectLink()">
<div>Paste a link</div>
</div>
</div>
</div>
ng-transclude content(visual):
The click event in the offending (dropbox) directive fires when I click anywhere in the highlighted section.
dropboxChooserModule.directive('dropboxChooser', function(dropboxChooserService) {
return {
priority: 1,
restrict: 'EA',
transclude: true,
scope: {
widget: '=',
options: '=',
extensions: '=',
},
template: '<div class="">' +
'<div ng-transclude></div>' +
'<input type="dropbox-chooser" name="selected-file"/></div>',
link: function postLink(scope, element, attrs) {
element.bind("click", function(event) {
dropboxChooserService.choose({
success: function(files) {},
cancel: function() {}
})
});
},
replace: true
};
});
The question is, naturally, what is causing it to trigger and how do I make it stop. It should trigger only when the element with the dropbox directive is clicked.

Removing the input element inside the directive seems to have "fixed" the problem.

Create a list of items built using angularjs

I would like to create a list of items built in Directive and share through controllers.
Here is my example in plunker: Example of my code
Here is my code in js:
var app = angular.module('app', []);
app.controller("BrunchesCtrl", function ($scope, $log) {
$scope.brunches = [];
$scope.addNew = function () {
$scope.brunches.push({ address: "" });
};
$scope.$watch('brunch.address', function(value) {
$scope.address = value;
$log.info($scope.address);
});
$scope.$watch(function() { return $scope.brunches.length; }, function() {
$scope.brunches = $scope.brunches.map(function (brunch) {
return brunch;
});
});
});
app.directive('brunchesView', function ($compile) {
return {
restrict: 'E',
templateUrl: 'brunch.html',
controller: 'BrunchesCtrl',
replace: true,
link: function (scope, element, attrs, controller) {
}
};
});
app.directive('businessSubmit', function ($log, $compile, formManagerService) {
return {
restrict: 'AE',
controller: 'BrunchesCtrl',
link: function (scope, element, attrs, controller) {
formManagerService.init();
var hasError;
element.on('click', function (e) {
e.preventDefault();
$log.info("brunches: \n");
$log.info(scope.brunches);
});
}
};
});
Here is an HTML:
<!DOCTYPE html>
<div class="controls">
<a class="btn btn-danger" id="addBrunch" data-ng-click="addNew()">
<i class="icon-plus-sign"></i>
add new...
</a>
</div>
</div>
<brunches-view class="well" data-ng-repeat="brunch in brunches">{{brunch}}</brunches-view>
<br/>
<p class="well">
JSON: {{brunches | json}}
</p>
<div class="control-group">
<div class="controls">
<a class="btn btn-primary" href="#" data-business-submit>
<i class="icon-save"></i>
Save...
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="script.js"></script>
And here is the template:
<div class="fc-border-separate">
<div class="control-group">
<label class="control-label">Address</label>
<div class="controls">
<input type="text" class="span6 m-wrap"
name="Address" data-ng-model="address"
value="{{address}}" />
</div>
</div>
</div>
The final thing I want to save the whole data inside the BusinessSubmit directive.
Help please...

Several issues with your code.
First, your ng-model for the <input> is set to address, but the object you are wanting to bind it to a brunch object that has an address property. Important to realize that ng-repeat will create a child scope for every repeated item
<input data-ng-model="brunch.address"/>
Another issue is you are assigning the parent controller to a directive as well. Important to understand that controllers are singletons so if you use controller more than once , each is a separate instance. Therefore nesting the parent controller in a directive makes no sense.
DEMO- [ng-model] fix
If you want the data shared with other controllers you should set up a service that holds the brunches data by injecting it into whatever controllers will need access