I've been struggling with Angular's isolate scope for over 24hrs now. Here's my scenario: I have an ng-repeat iterating over an array of objects from which I want to use a custom directive to either generate a <select> or <input> based on the field_type property of the current object being iterated. This means I'll have to generate the template and $compile in the post-link function of the directive since I have no access to the iterated object in the template function.
Everything works as expected, apart from the actual binding of the generated template to the controller (vm) in my outer scope. I think my approach (adding this in the template string: ng-model="vm.prodAttribs.' + attr.attribute_code +'") may be wrong, and would appreciate pointers in the right direction. Thanks!
See sample code below:
directives:
directives.directive('productAttributeWrapper', ['$compile', function($compile){
//this directive exists solely to provide 'productAttribute' directive access to the parent scope
return {
restrict: 'A',
scope: false,
controller: function($scope, $element, $attrs){
this.compile = function (element) {
$compile(element)($scope);
console.log('$scope.prodAttribs in directive: ', $scope.prodAttribs);
};
}
}
}]);
directives.directive('productAttribute', ['$compile', function($compile){
return {
restrict: 'A',
require: '^productAttributeWrapper', //use the wrapper's controller
scope: {
attribModel: '=',
prodAttribute: '=productAttribute', //binding to the model being iterated by ng-repeat
},
link: function(scope, element, attrs, ctrl){
var template = '';
var attr = scope.prodAttribute;
if(!attr) return;
switch(attr.attribute_field_type.toLowerCase()){
case 'textfield':
template =
'<input type="text" id="'+attr.attribute_code+'" ng-model="vm.prodAttribs.' + attr.attribute_code +'">';
break;
case 'dropdown':
template = [
'<select class="cvl" id="'+attr.attribute_code+'" ng-model="vm.prodAttribs.' + attr.attribute_code +'">',
'#cvl_option_values',
'\n</select>'
].join('');
var options = '\n<option value="">Select One</option>';
for(var i=0; i<attr.cvl_option_values.length; i++) {
var optionVal = attr.cvl_option_values[i].value;
options += '\n<option value="'+optionVal+'">' + attr.cvl_option_values[i].value + '</option>';
}
template = template.replace('#cvl_option_values', options);
break;
}
element.html(template);
ctrl.compile(element.html()); //try to bind template to outer scope
}
}
}]);
html:
<div ng-controller="ProductController as vm">
<div product-attribute="attrib" ng-repeat="attrib in vm.all_attribs"></div>
</div>
controller:
app.controller('ProductDetailsController', function(){
var vm = this;
//also added the property to $scope to see if i could access it there
$scope.prodAttribs = vm.prodAttribs = {
name: '',
description: '',
price: [0.0],
condition: null
}
vm.all_attributes = [
{
"attribute_id": 1210,
"attribute_display_name": "Product Type",
"attribute_code": "product_type",
"attribute_field_type": "Textfield",
"cvl_option_values": [],
"validation_rules": {}
},
{
"attribute_id": 902,
"attribute_display_name": "VAT",
"attribute_code": "vat",
"attribute_field_type": "dropdown",
"cvl_option_values": [
{
"option_id": "5",
"value": "5%"
},
{
"option_id": "6",
"value": "Exempt"
}
],
"validation_rules": {}
}];
})
issue is probably here :
element.html(template);
ctrl.compile(element.html()); //try to bind template to outer scope
element.html() returns a html as a string, not the ACTUAL dom content, so what you inserted into your directive's element is never actually compiled by angular, explaining your (absence of) behaviour.
element.append(ctrl.compile(template));
should work way better.
For directive requiring parent controller, I would also change your ctrl.compile method (renamed to insertAndCompile here)
ctrl.insertAndCompile = function(content) {
$compile(content)($scope, function(clone) {
$element.append(clone);
}
}
You would just have to call it this way :
ctrl.insertAndCompile(template);
instead of the 2 lines I gave as first answer.
I would suggest to use templates instead of html compilation manually. The solution is much simpler:
Controller would contain data declaration:
app.controller('ProductDetailsController', function($scope) {
$scope.prodAttribs = {
name: '',
description: '',
price: [0.0],
condition: null
}
$scope.all_attribs = [{
"attribute_id": 1210,
"attribute_display_name": "Product Type",
"attribute_code": "product_type",
"attribute_field_type": "Textfield",
"cvl_option_values": [],
"validation_rules": {}
}, {
"attribute_id": 902,
"attribute_display_name": "VAT",
"attribute_code": "vat",
"attribute_field_type": "dropdown",
"cvl_option_values": [{
"option_id": "5",
"value": "5%"
}, {
"option_id": "6",
"value": "Exempt"
}],
"validation_rules": {}
}];
});
Your directive would be as simple as that:
app.directive('productAttribute', function() {
return {
restrict: 'A',
scope: {
attribModel: '=',
prodAttribute: '=productAttribute'
},
templateUrl: 'template.html',
controller: function($scope) {}
}
});
template.html would be:
<div>
<select ng-show="prodAttribute.attribute_field_type.toLowerCase() == 'dropdown'" class="cvl" id="" ng-model="prodAttribs.attribute_code">
<option value="">Select One</option>
<option ng-repeat="item in prodAttribute.cvl_option_values track by $index" value="{{item.value}}">{{item.value}}</option>
</select>
<input ng-show="prodAttribute.attribute_field_type.toLowerCase() == 'textfield'" type="text" id="{{prodAttribute.attribute_code}}" ng-model="prodAttribute.attribute_code">
</div>
And your html:
<div ng-controller="ProductController">
<div ng-repeat="attrib in all_attribs" product-attribute="attrib">{{attrib}}</div>
</div>
Related
I am writing a directive to output a list of items. Those items are meant to be read from a JSON somewhere.
Now, I want to render each item accordingly to a method that would be passed to the directive. Then, in my template, I call the method, passing it the item to be rendered.
The method itself is called, but the passed item is undefined.
Where am I wrong, and how to acheive this?
You can see and play with the code here:
https://jsfiddle.net/zpntqayr/
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<drop-down-list items="data" display-item="itemToString(item)" />
</div>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function ($scope, $http) {
$scope.data = [{ "Name": "Value 1", "Value": 1 }, { "Name": "Value 2", "Value": 2 }, { "Name": "Value 3", "Value": 3 }, ] ;
$scope.itemToString = function (item) {
// alert(item);
return item.Name;
};
});
myApp.directive('dropDownList', function () {
return {
restrict: 'E',
replace: true,
scope: {
items: '=',
displayItem: '&'
},
template: '<ul><li ng-repeat="item in items">{{displayItem(item)}}</li></ul>',
};
});
</script>
</body>
</html>
Just replace the code in the directive template as below:
{{displayItem(item)}}
with
{{displayItem({item: item})}}
I am using autocomplete with angularjs.
Everytime I select a value from a dropdownlist the items that fill the autocomplete should change. But they does not change.
I see that the model change, but not the outcomplete.
Here the directive I am using for autocomplete.
.directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
})
And here how I use the autocomplete:
<input type="text" name="indirizzo" data-ng-model="input.indirizzo" auto-complete ui-items="indirizzi" data-ng-model-options="{ updateOn: 'mousedown blur' }" />
Everytime I change the dropdownlist the $scope.indirizzi change correctly but not for the autocomplete.
Perhaps I should use a watch or something similar?
Any suggestions?
Thank you
UPDATE
Perhaps I have not explained good.
I Have a dropdownlist that when a value is selected from, fill my autocomplete list (like some cascade dropdown).
Here the dropdownlist:
<select name="state" data-ng-options="s for s in states" data-ng-model="input.state" data-ng-change="fillAutoComplete(input.state)" />
The fillAutocomplete function is :
$scope.fillAutoComplete = function (state) {
$scope.indirizzi = ...
}
Now, everything I change the value in the dropdown, the $scope.indirizzi is correctly updated, but the autocomplete list is not updated.
Please check this example auto-complete using angular.
<div ng-app='MyModule'>
<div ng-controller='DefaultCtrl'>
<input auto-complete ui-items="names" ng-model="selected">
selected = {{selected}}
</div>
JsCode
function DefaultCtrl($scope) {
$scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}
angular.module('MyModule', []).directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
});
JSFiddle Working
I have changed my directive as following:
.directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
scope.$watch(iAttrs.uiItems, function () {
iElement.autocomplete("option", "source", scope[iAttrs.uiItems]);
});
};
})
See the scope.$watch
Autocomplete is a jQuery plugin, I guess you have to call $scope.$apply() to let Angular know that you have changed something.
My AngularJS service code -
this.getEducation = function (id) {
var url = 'SOME_URL/?party_id=' + id;
var deferred = $q.defer();
$http.get(url).
success(function (data, status, headers, config) {
console.log(data);
deferred.resolve(data);
}).
error(function (data, status, headers, config) {
console.log("could not get education info");
deferred.reject(data);
});
return deferred.promise;
}
Now, my service is returning a data like this -
[
{
"id": 22,
"party_id": 9,
...
"university": "UoP",
"created_at": "2015-07-13 17:09:52",
"degree": "BE"
},
{
"id": 23,
"party_id": 9,
...
"university": "UoP",
"created_at": "2015-07-13 17:11:06",
"degree": "ME"
}
]
Now, here's the problem - when the data being resolved in promise, contains following array -
[
{
"id": 22,
"party_id": 9,
...
"university": "UoP",
"created_at": "2015-07-13 17:09:52",
"degree": "BE"
},
{
"id": 23,
"party_id": 9,
...
"university": null,
"created_at": "2015-07-13 17:11:06",
"degree": null
}
]
So, my question is, WHY AngularJS setting some values of my array elements to null ???
P.S. I'm using the data retrieved by this in controller, assigning it to scope variable, and doing ng-repeat on forms.
Edit :
My controller code is as follows
$scope.educationInformations = [];
$scope.setEducation = function () {
EducationProvider.getEducation(id).then(
function (educations) {
angular.forEach(educations, function(education){
console.log(education);
$scope.educationInformations.push({education:education});
console.log($scope.educationInformations);
})
});
};
THIS works, (console log is accurate)
Now, This is my template code.
When this is used,
<div ng-repeat="educationInfo in educationInformations">
<input-text ng-model="educationInfo.education.university"></input-text>
</div>
Now input-text is a directive created by me..
Directive code -
.directive('inputText', function () {
return {
templateUrl: 'views/inputText.html',
restrict: 'E',
scope: {
ngModel: '='
}
};
});
Directive template
<input class="form-control"
ng-model="ngModel" ng-init="ngModel = null">
Edit the directive template code as follows
<input class="form-control"
ng-model="ngModel" ng-init="ngModel">
Your code was setting ng-model to null ( ng-init = "ngModel = null ), as you have two way binding with controller, this initialization to null would affect the controller scope objects.
I'm very new to angularjs and need some advice about the angular way to implement something very simple. In my $scope I need to set some field defaults, and these defaults are needed multiple times in my controller.
I want to be able to refactor these defaults out to a common place, to thin out the controller and allow for code reuse, but not sure if this should be a factory, directive or service.
Heres an example of the defaults:
$scope.skills = [{
description: '',
years: "1",
level: "0",
years_values: [
{ id: "1", description: "1" },
{ id: "2", description: "2" },
{ id: "3", description: "3+" }],
level_values: [
{ id: "0", description: "Starter"},
{ id: "1", description: "Intermediate"},
{ id: "2", description: "Advanced"} ]
}]
Here's an example of where I'd like to call the "new function":
skillSuccess = (resp)->
Loader.hide();
$rootScope.current_user = resp;
#TODO replace this repetition
$scope.skills = [{
description: '',
.... etc
My questions are:
Should I use a factory/directive/service, (or something else) for
this refactoring?
How do I ensure that the function gets called
initially so that the default values are available for the fields
when the page loads?
Should I use a factory/directive/service, (or something else) for this
refactoring?
I'd suggest you to create a constant because looks like you have defaults data which has initially has some value and that will going to be change by the user from the front-end. So you could place that in angular constant, then that constant will be accessed by the factory/service. And Factory/service will do the needful manipulation from its function. To make available constant in your service/factory you need to inject constant name in your service.
By looking at your current requirement you shouldn't be take consideration of directive component.
Constant
app.constant('defaults', [{
description: '',
years: "1",
level: "0",
years_values: [
{ id: "1", description: "1" },
{ id: "2", description: "2" },
{ id: "3", description: "3+" }],
level_values: [
{ id: "0", description: "Starter"},
{ id: "1", description: "Intermediate"},
{ id: "2", description: "Advanced"} ]
}]);
Service
app.service('dataService', function(defaults){
var dataService = this;
dataService.defaults = defaults;
dataService.defaults = angular.copy(defaults) //will return same copy every-time
dataService.getDefaults = function(){
return dataService.defaults;
}
//other method will lie here
})
How do I ensure that the function gets called initially so that the default values are available for the fields when the page loads?
You could simply get that defaults by consuming getDefaults method of your service, then stored that retrieved defaults and use those for manipulation.
If you want the defaults copy to instantiated every-time then use angular.copy(defaults) which will give you the copy of defaults.
Controller
app.controller('myCtrl', function($scope, dataService){
$scope.defaults = dataService.getDefaults(); //this will have defaults
//...other stuff here...
});
Should I use a factory/directive/service, (or something else) for this refactoring?
A controller should be used to set the scope, but the default values should be stored as a constant and returned by a factory. A factory pattern is preferred here because it is a singleton.
angular.module('myApp')
.factory('skillsFactory', function (defaultSkills) {
var service = {};
service.getDefaults = function () {
return defaultSkills;
};
return service;
})
.constant('defaultSkills', [{
description: '',
years: "1",
level: "0",
years_values: [{
id: "1",
description: "1"
}, {
id: "2",
description: "2"
}, {
id: "3",
description: "3+"
}],
level_values: [{
id: "0",
description: "Starter"
}, {
id: "1",
description: "Intermediate"
}, {
id: "2",
description: "Advanced"
}]
}]);
How do I ensure that the function gets called initially so that the default values are available for the fields when the page loads?
In your controller, call $scope.skills = skillsFactory.getDefaults();
angular.module('myApp')
.controller('skillsCtrl', function ($scope, skillsFactory) {
$scope.skills = skillsFactory.getDefaults();
});
I am trying to unit test a directive that makes a dropdown list using some JSON to specify the details of the list. The directive works fine, but I'm having issues while trying to unit test it.
Here's the test:
/* global inject, expect, angular */
define(function(require){
'use strict';
require('angular');
require('angularMock');
require('reporting/js/directives/app.directives');
require('reporting/js/directives/drop.down.field.directive');
describe("drop down field", function() {
// debugger;
var directive, scope;
beforeEach(module('app.directives'));
beforeEach(inject(function($compile, $rootScope) {
scope = $rootScope;
scope.dropDownResponses = {};
scope.dropDownField = {
"name": "Test Drop Down",
"type": "dropdown",
"hidden": "false",
"defaultValue": "None",
"values": [
{
"key": "1",
"value": "FL",
"select": "true"
},
{
"key": "2",
"value": "GA",
"select": "false"
},
{
"key": "3",
"value": "TX",
"select": "false"
}
],
"validation": null
};
directive = angular.element('<div drop-down-field="dropDownField" drop-down-responses="dropDownResponses"></div>');
$compile(directive)(scope);
scope.$digest();
}));
it("should build three dropdown choices", function() {
expect(directive.find('option').length).toBe(4);
});
it('should have one dropdown', function() {
expect(directive.find("select").length).toBe(1);
});
it('should update the model when a new choice is selected', function() {
angular.element(directive.find("select")[0]).val('1');
angular.element(directive.find("select")[0]).change();
expect(scope.dropDownResponses[scope.dropDownField.name]).toBe("1");
});
});
});
Here's the directive:
define(function(require) {
'use strict';
var module = require('reporting/js/directives/app.directives');
var template = require('text!reporting/templates/drop.down.field.tpl');
module.directive('dropDownField', function () {
return {
restrict: 'A',
replace: true,
template:template,
scope: {
dropDownField : "=",
dropDownResponses : "="
}
};
});
return module;
});
Here's the markup:
<div>
{{dropDownField.name}}
<select ng-model="dropDownResponses[dropDownField.name]" ng-options="value.key as value.value for value in dropDownField.values"></select>
</div>
The last it block is what is of concern here. When I fire the change event, the value on the model always winds up being one more that expected. For instance, the value stored in scope.dropDownResponses in this case winds up being 2.
Any ideas?
Its coming up to this questions first birthday and I found it intriguing as to why the test is not passing.
I have come to the conclusion that the premise of the test is wrong as the test
expect(scope.dropDownResponses[scope.dropDownField.name]).toBe("1");
should be
expect(scope.dropDownResponses[scope.dropDownField.name]).toBe("2");
The reason for this is that the the value stored in scope.dropDownResponses is in fact 2 as the questioner found.
When you are selecting by val('1') you are selecting the second option in the select element
<select ng-model="dropDownResponses[dropDownField.name]" ng-options="value.key as value.value for value in dropDownField.values" class="ng-valid ng-dirty">
<option value="0" selected="selected">FL</option>
<option value="1">GA</option>
<option value="2">TX</option>
</select>
which reflects the second item in the array in the spec
{
"key": "2",
"value": "GA",
"select": "false"
},
You can see this in action in this jsfiddle where the console.log output
it('should update the model when a new choice is selected', function() {
console.log(angular.element(directive.find("select")));
console.log('selected before = ' + angular.element(directive.find("select option:selected")).text());
angular.element(directive.find("select")[0]).val(1);
console.log('selected after = ' + angular.element(directive.find("select option:selected")).text());
angular.element(directive.find("select")[0]).change();
console.log('selected Text value = ' + angular.element(directive.find("select option:selected")).text());
expect(scope.dropDownResponses[scope.dropDownField.name]).toBe("2");
console.log(scope.dropDownResponses[scope.dropDownField.name]);
//console.log('selectedIndex=' + angular.element(directive.find("select")).selectIndex());
console.log(angular.element(directive.find("select"))[0]);
});
is
selected before =
(index):98 selected after = GA
(index):100 selected Text value = GA
(index):102 2