Update ng-options hosted by a directive - angularjs

I have a custom directive that displays a dropdownlist.
Is it possible to dynamically re-populate the ng-options from a datasource that comes from the controller that hosts the directive.
The datasource itself comes from a service.
Currently it works well from the initial array passed to the directive, but when I add new data (from the controller/service to this array I would like to update the item list.
Any help?
EDIT :
This is how I use my directive.
<select-item-obj-from-array datasource="ctrl.ActivityAddresses" ng-model="form.Activity.AddressID" name="AddressID" value="AddressID" label="City" .... />
My directive looks like:
app.directive('selectItemObjFromArray', function () {
return {
restrict: 'E',
replace: true,
template: function (element, attrs) {
var tpl = '';
tpl += "<div><div class=\"form-group clearfix\" >";
tpl += '<label for="' + attrs.name + '" class="col-lg-3 control-label">' + attrs.label + '</label>';
tpl += '<div class="col-lg-9">';
tpl += '<select ng-disabled="ngDisabled" name="' + attrs.name + '" ng-model="ngModel" chosen="datasource" ng-options="c.Name for c in datasource"></select>';
tpl += '</div>';
tpl += '</div>';
tpl += '</div>';
return tpl;
},
scope: {
ngModel: "=",
datasource: "="
},
link: function (scope, elem, attrs) {
var select = elem.find("select").eq(0);
select.chosen();
scope.$watch(function () {
return select[0].length;
},
function (newvalue, oldvalue) {
if (newvalue !== oldvalue) {
select.trigger("chosen:updated");
}
});
scope.$watch(attrs.ngModel, function () {
select.trigger('chosen:updated');
});
}
};
});
if my controller/service updated the ctrl.ActivityAddresses I don't know how to "reinvoke" the directive to update the dropdownlist..

You can broadcast from your service like this:
var broadcast = function() {
$rootScope.$broadcast('items.update');
};
Assuming that items is an array.
Then you can catch the broadcast in your controller or directive:
$scope.$on('items.update', function (event) {
//Do whatever you want with the items.
});
I think this is what you want? You don't need to change the ng-options directive for this.

Related

How to make directive use the controller specified in directive attribute?

So I have a directive:
<directive data="user" templateUrl="./user.html" controller="UserController"></directive>
I want that directive to use the controller specified in "controller" attribute, as you see above.
Is it possible with AngularJS directives? Or should I do it other way, maybe with components?
My code currently looks like this:
app.directive('directive', function() {
var controllerName = "UserController"; // i want that to dynamicaly come from attribute
// check if controller extists:
var services = [];
app['_invokeQueue'].forEach(function(value){
services[value[2][0]] = true;
});
if (!services[controllerName]) controllerName = false;
return {
scope: { 'data' : '=' },
link: function (scope) {
Object.assign(scope, scope.data);
},
templateUrl: function(element, attr) {
return attr.templateurl;
},
controller: controllerName
}
});
You can do following (not exactly what you ask - it creates bunch of nested scopes, but should be sufficient):
.directive('directive', () => {
scope: { 'data' : '=' },
template: (elem, attrs) => {
return '<div ng-controller="' + attrs.controller + ' as vm"><div ng-include="' + attrs.template + '"></div></div>';
}
});
<directive data="user" templateUrl="./user.html" controller="UserController"></directive>
you may use $templateCache directly instead of ng-include
if you need controller/template/... to be dynamic, you need to observe/watch + dom manipulation + recompile stuff
Okay, so after analysing Petr's answer I post the working code using nested divs:
app.directive('directive', function() {
return {
scope: { 'data' : '=' },
link: function (scope) {
// this makes your fields available as {{name}} instead of {{user.name}}:
Object.assign(scope, scope.data);
},
template: function(element, attrs) {
var controllerName = attrs.controller;
var controllerString = controllerName + ' as vm';
// check if controller extists:
var services = [];
app['_invokeQueue'].forEach(function(value){
services[value[2][0]] = true;
})
if (!services[controllerName]) {
return '<div ng-include="\'' + attrs.templateurl + '\'"></div>';
} else {
return '<div ng-controller="' + controllerString + '"><div ng-include="\'' + attrs.templateurl + '\'"></div></div>';
}
}
}
});

Updating directive when scope variable changes in ng-grid?

I have a requirement for consuming an array of objects within ng-grid that are custom styled to look like a tag (similar to tags on here).
I have taken the approach of using a cellTemplate and have created a custom directive for this.
What is happening is when you sort, other columns change but the 'Tags' column does not, it stays as is, like the directive isn't getting updated.
Here is my directive:
app.directive('tag', function($compile){
return {
restrict: 'EA',
link: function(scope, element, attrs) {
attrs.$observe('tags', function(value) {
var array = JSON.parse(value);
var newHtml = '<ul>';
for(var i=0;i<array.length;i++)
{
newHtml += '<li>' + array[i].text + '</li>';
}
newHtml += '</ul>';
var e = $compile(newHtml)(scope);
element.replaceWith(e);
});
}
}
});
Here is a plunker: http://plnkr.co/edit/OxeUPaLLWtiCnvmgehnl
Thanks
Don't know if this fulfils all your requirements but you can change your tag directive to this:
app.directive('tag', function($compile){
var ddo = {
restrict: 'EA',
template: '<div><ul><li ng-repeat="tag in tags">{{tag}}</li></div>',
scope: { tags: "=tags" }
};
return ddo;
});
Or if you want to keep your code, just change the DOM first and compile it afterwards:
app.directive('tag', function($compile){
var ddo = {
restrict: 'EA',
scope: { tags: "#tags" },
link: function(scope, element, attrs) {
attrs.$observe('tags', function(value) {
var array = JSON.parse(value);
var newHtml = '<ul>';
for(var i=0;i<array.length;i++)
{
newHtml += '<li>' + array[i].text + '</li>';
}
newHtml += '</ul>';
element.html(newHtml);
$compile(newHtml)(scope);
});
}
};
return ddo;
});
Edit: Also, if all you want to do is change the layout, nothing stops you from calling ng-repeat in your cellTemplate:
cellTemplate: '<ul><li ng-repeat="val in row.entity.arr">{{val}}</li></ul>'}

Add dynamic transcluded content

I'm trying to accomplish the following scenario:
I've got the following directive:
return {
restrict: "AE",
replace: true,
transclude: true,
scope: {
chartData: "=",
groupId: "#",
groupName: "#"
},
template: "<div class=\"flex\" ng-transclude></div>",
compile: function(){
var charts = [];
return function (scope, element, attributes, controller, transcludeFn) {
_.forEach(scope.chartData, function (data) {
var id = "gauge-" + scope.groupId + '-' + data.name;
scope[id] = data.value; // gauge directive can now access this value
element.append("<div class=\"flex-spacer flex-column\"><div bv-gauge chart-title=\"" + data.name + "\" data-value=\"" + scope[id] + "\" series-name=\"" + scope.groupName + "\"></div></div>");
charts.push(id);
});
$compile(element.contents())(scope);
scope.$watch("chartData", function (newVal) {
_.forEach(scope.chartData, function (data) {
var id = "gauge-" + scope.groupName + '-' + data.name;
scope.$broadcast("chart:update", newVal);
});
});
}
}
};
As you can see I'm adding dynamically some content to the directive's element. It works nice but there is one issue; the isolated scope of inner directives ( i.e. bv-gauge) can see the outer scope only not the scope of bv-gauge-parent; As far as I know this is the default behaviour, which we can override by using the transclude function.
However, it seems that angular doesn't consider the dynamically added content as part of the transcluded content. So when I do the following:
transcludeFn(scope, function(clone, scope){
// clone doesn't have the content we added earlier
});
Is there any way to associate the scope of the transcluded content with the parent directive?

How to get ng-model value inside custom directive

I've searched here on SO and tried the answers I found, but I can't seem to get the model value out of the ngModel of my custom directive.
Here's the directive
/*
*usage: <markdown ng:model="someModel.content"></markdown>
*/
breathingRoom.directive('markdown', function () {
var nextId = 0;
return {
require: 'ngModel',
replace: true,
restrict: 'E',
template: '<div class="pagedown-bootstrap-editor"></div>',
link:function (scope, element, attrs, ngModel) {
var editorUniqueId = nextId++;
element.html($('<div>' +
'<div class="wmd-panel">' +
'<div id="wmd-button-bar-' + editorUniqueId + '"></div>' +
'<textarea class="wmd-input" id="wmd-input-' + editorUniqueId + '">{{modelValue()}}' +
'</textarea>' +
'</div>' +
'<div id="wmd-preview-' + editorUniqueId + '" class="wmd-panel wmd-preview"></div>' +
'</div>'));
var converter = new Markdown.Converter();
var help = function () {
// 2DO: add nice modal dialog
alert("Do you need help?");
};
var editor = new Markdown.Editor(converter, "-" + editorUniqueId, {
handler: help
});
editor.run();
// local -> parent scope change (model)
jQuery("#wmd-input-" + editorUniqueId).on('change', function () {
var rawContent = $(this).val();
ngModel.$setViewValue(rawContent);
scope.$apply();
});
// parent scope -> local change
scope.modelValue = function () {
console.log('modelvalue - ', ngModel.$viewValue);
return ngModel.$viewValue;
};
}
};
});
And here's the HTML
<markdown ng-class="{error: (moduleForm.Description.$dirty && moduleForm.Description.$invalid) || (moduleForm.Description.$invalid && submitted)}"
id="Description"
name="Description"
placeholder="Description"
ng-model="module.description"
required></markdown>
The problem here is that the output is simply
{{modelValue()}}
I also tried creating a private method
function getModelValue() {
console.log(ngModel.$viewValue);
return ngModel.$viewValue;
}
and then change the one template line to
'<textarea class="wmd-input" id="wmd-input-' + editorUniqueId + '">' + getModelValue() +
but then the output is
NaN
Where am I going wrong?
if it matters, here's the order of my scripts (not including vendor scripts)
<script src="app.js"></script>
<script src="directives/backButtonDirective.js"></script>
<script src="directives/bootstrapSwitchDirective.js"></script>
<script src="directives/markdownDirective.js"></script>
<script src="directives/trackActiveDirective.js"></script>
<script src="services/alertService.js"></script>
<script src="services/roleService.js"></script>
<script src="services/moduleService.js"></script>
<script src="services/changePasswordService.js"></script>
<script src="services/userService.js"></script>
<script src="controllers/usersController.js"></script>
<script src="controllers/userController.js"></script>
<script src="controllers/moduleController.js"></script>
<script src="controllers/modulesController.js"></script>
The HTML your inserting isn't getting compiled. It's easiest just to move it into your template, or investigate using ng-transclude. Here's an example of moving it into your template.
plunker
breathingRoom.directive('markdown', function () {
var nextId = 0;
return {
require: 'ngModel',
replace: true,
restrict: 'E',
template: '<div class="pagedown-bootstrap-editor"><div class="wmd-panel">' +
'<div id="wmd-button-bar-{{editorUniqueId}}"></div>' +
'<textarea class="wmd-input" id="wmd-input-{{editorUniqueId}}">{{modelValue()}}' +
'</textarea>' +
'</div>' +
'<div id="wmd-preview-{{editorUniqueId}}" class="wmd-panel wmd-preview"></div>' +
'</div></div>',
link:function (scope, element, attrs, ngModel) {
scope.editorUniqueId = nextId++;
// parent scope -> local change
scope.modelValue = function () {
console.log('modelvalue - ' + ngModel.$viewValue);
return ngModel.$viewValue;
};
}
};
});
You weren't actually resolving your model as the {{modelValue()}} expression was just part of the HTML string your were building in the link function.
You should move the editor markup to the template so that you can bind to ng-model.
Assuming the goal is to create the necessary HTML markup for the Markdown Editor and then show the preview of the converted markdown I would split this into two roles:
A directive for the custom markup
A filter for actually converting the value to markdown:
Markup:
<div ng-app="app" ng-controller="DemoCtrl">
<h3>Markdown editor</h3>
<markdown-editor ng-model="markdown"></markdown-editor>
</div>
JavaScript:
var app = angular.module('app', []);
app.filter('markdown', function () {
return function (input) {
return input.toUpperCase(); // this is where you'd convert your markdown
};
});
app.directive('markdownEditor', function () {
return {
restrict: 'E',
scope: {
ngModel: "="
},
template:
'<div>' +
'<textarea ng-model="ngModel"></textarea>' +
'<div class="preview">{{ ngModel | markdown }}</div>' +
'</div>'
};
});
app.controller('DemoCtrl', function ($scope) {
$scope.markdown = "**hello world**";
});
The = scope sets up a two way binding on the property passed to ng-model and {{ ngModel | markdown }} pipes the value of ngModel to the markdown filter.
http://jsfiddle.net/benfosterdev/jY3ZK/
Look at angular's parse service. It enables you get and set the value of property referenced in ng-model.
link: function(scope, elem, attrs) {
var getter = $parse(attrs.ngModel);
var setter = getter.assign;
var value = getter(scope);
setter(scope, 'newValue');
}
The simplest way is:
If ngModel variable is on the top level of the scope
link: function(scope, elem, attrs) {
if (attrs.ngModel) {
var myModelReference = scope[attrs.ngModel];
}
}
If ngModel refers to a property deeply nested on the scope (best way)
(so, for scope.prop1.prop2 , attrs.ngModel will be "prop1.prop2"), and since you can't just look up scope['prop1.prop2'], you need to dig in by converting the string key to actual nested keys.
For this I recommend Lodash _.get() function
link: function(scope, elem, attrs) {
if (attrs.ngModel) {
var myModelReference = _.get(scope, attrs.ngModel);
}
}

angular, in directive, adding to the template an element with ng model

I'm trying to add an input element with ng-model inside a directive.
my code
the link function of my directive:
link: function (scope, element, attrs) {
var elem_0 = angular.element(element.children()[0]);
for (var i in scope.animals[0]) {
elem_0.append(angular.element('<span>' + scope.animals[0][i].id + '</span>'));
//this part doesn't work
var a_input = angular.element('<input type="text">');
a_input.attr('ng-model', 'animals[0][' + i + '].name');
//end
elem_0.append(a_input);
}
it seems i need to call $compile() at the end, but have no idea how.
Try
var a_input = angular.element($compile('<input type="text" ng-model="animals[0][' + i + '].name"/>')($scope))
elem_0.append(a_input);
You are making directive more complicated than necessary by manually looping over arrays when you could use nested ng-repeat in the directive template and let angular do the array loops:
angular.module("myApp", [])
.directive("myDirective", function () {
return {
restrict: 'EA',
replace: true,
scope: {
animals: '=animals'
},
template: '<div ng-repeat="group in animals">'+
'<span ng-repeat="animal in group">{{animal.id}}'+
'<input type="text" ng-model="animal.name"/>'+
'</span><hr>'+
'</div>'
}
});
DEMO: http://jsfiddle.net/Ajsy7/2/

Resources