I can't seem to get selects working with Angular directives! I have two selects, both inside a directive. I would like for the first select to determine the available options for the second select.
Here's a fiddle:
http://jsfiddle.net/jordannpotter/hfyUa/
Select "Baz" from the "Secondary Select"
Select "First" from the "Primary Select"
Notice that the "Secondary Select" goes blank!!
Of course, if you comment out the directive code (lines 3-9), it works perfectly.
What's going on here, and how do I fix it??
So what you have happening is that the scope of your directive is detaching you from the scope of your controller and you need to add an object level prior to the primary and secondary variables.
var app = angular.module('myApp', [])
app.directive('awesomeDirective', function () {
return {
restrict: 'E',
transclude: true,
template: '<div class="awesome" ng-transclude></div>'
}
});
AwesomeController = function ($scope, $timeout) {
$scope.options = {};
updateAllowedSecondaryOptions = function () {
if ($scope.options.primary == 'primaryOption1') {
$scope.secondaryOptions = [
{value: 'foo', title: 'Foo'},
{value: 'bar', title: 'Bar'},
{value: 'baz', title: 'Baz'}]
} else if ($scope.options.primary == 'primaryOption2') {
$scope.secondaryOptions = [
{value: 'bar', title: 'Bar'},
{value: 'baz', title: 'Baz'}]
}
$scope.options.secondary = $scope.secondaryOptions[0]
}
$scope.options.primary = 'primaryOption2'
updateAllowedSecondaryOptions()
$scope.primarySelected = function (newValue) {
$scope.options.primary = newValue;
updateAllowedSecondaryOptions()
}
};
http://jsfiddle.net/G5PLL/
You can see more about what is happening by reading https://github.com/angular/angular.js/wiki/Understanding-Scopes which goes into what is happening to detach you from the prototypal inheritance.
P.S. Misko's rule “Whenever you have ng-model there’s gotta be a dot in there somewhere. If you don’t have a dot, you’re doing it wrong.”
Related
I have a treeview directive credit to http://codepen.io/bachly/pen/KwWrzG for being my starting block. that I am trying to update when I add objects to the collection. I can update the object and insert the new objects but the treeview directive is never called once the $scoped item is updated.
Ultimately the data used will come from a service at this point I am just testing with mock data.
The original collection looks like this
$scope.myList = {
children: [
{
name: "Event",
children: [
{
name: "Event Date",
parent:"Event",
children: [
{
name: "2008",
filterType: '_eventStartDate',
parent: 'Event'
},
{
name: "2009",
filterType: '_eventStartDate',
parent: 'Event'
}
]
},
{
name: "Event Attendee",
parent: "Event",
children: [
{
name: "Person 1",
filterType: '_eventAttenddeeName',
parent: 'Event Attendee'
},
{
name: "Person 2",
filterType: '_eventAttenddeeName',
parent: 'Event Attendee'
}
]
}
]
}]
};
var TheOtherCollection = {
children: [
{
name: "A New Event",
children: [
{
name: "The Other Date",
parent: " A New Event",
children: [
{
name: "2010",
FilterType: '_eventStartDate',
Parent: '_event'
},
{
name: "2011",
FilterType: '_eventStartDate',
Parent: '_event'
}
]
}
]
}]
};
This generates a tree view with checkboxes using the following directive and html
app.directive('tree', function () {
return {
restrict: 'E',
replace: true,
scope: {
t: '=src',
filter: '&'
},
controller: 'treeController',
template: '<ul><branch ng-repeat="c in t.children track by $index" src="c" filter="doSomething(object, isSelected)"></branch></ul>'
};
});
app.directive('branch', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
b: '=src',
filter: '&',
checked: '=ngModel'
},
template: '<li><input type="checkbox" ng-click="innerCall()" ng-model="b.$$hashKey" ng-change="stateChanged(b.$$hashKey)" ng-hide="visible" /><a>{{ b.name }}</a></li>',
link: function (scope, element, attrs) {
var clicked = '';
var hasChildren = angular.isArray(scope.b.children);
scope.visible = hasChildren;
if (hasChildren) {
element.append('<tree src="b"></tree>');
$compile(element.contents())(scope);
}
element.on('click', function(event) {
event.stopPropagation();
if (hasChildren) {
element.toggleClass('collapsed');
}
});
scope.stateChanged = function(b) {
clicked = b;
};
scope.innerCall = function() {
scope.filter({ object: scope.b, isSelected: clicked });
};
}
};
});
And then the html
<div ng-controller="treeController">
<tree src="myList" iobj="object" filter="doSomething(object, isSelected)"></tree>
<a ng-click="clicked()"> link</a>
</div>
When a checkbox is clicked the new collection is added to the existing one using lodashjs
ng-click event
$scope.doSomething = function (object, isSelected) {
if (isSelected) {
var item = object;
console.log(item);
nestAssociation(object, $scope.myList, TheOtherCollection);
}
}
which creates the new array and adds it within the children array
function nestAssociation(node, oldCollection, newAggregates) {
// var item = fn(oldCollection, node.parent);
var updatedArray = _.concat(oldCollection.children, newAggregates);
console.log(updatedArray);
if (updatedArray != null)
updateMyList(updatedArray);
}
I can see in the output I have a new object but I can't get the treeview to update. I have tried within the directive to add a $compile(element) on the click event in the directive but since the array is not built yet nothing changes.
Do I need to add a $watch to this directive and if so where or is there some other way I can get the directive to re-render and display the new nested collection?
Update
Base on some of the feedback and questions here is a little more detail around the question. The issue I am seeing is not in the directive as far as moving data around the issue is I cannot get the treeview to re-render once an array is added to the existing model.
The following link is a working plunker that shows the project as it currently works.
Running chrome dev tools I can see in the output the model is updated after a checkbox is selected
While I see the object is updated, the directive never updates to show the new array added to the object. This is the part that I need help understanding.
thanks in advance
You pass the function to the inner directives (which is the best practice), but you have access to scope.filter. Not doSomethingFunction. This one is undefined there.
filter="doSomething(object, isSelected)"
=>
filter="filter(object, isSelected)"
app.directive('tree', function () {
return {
restrict: 'E',
replace: true,
scope: {
t: '=src',
filter: '&'
},
controller: 'treeController',
template: '<ul>
<branch ng-repeat="c in t.children track by $index"
src="c" filter="filter(object, isSelected)">
</branch>
</ul>'
};
});
Next :
You can never access $$ variables in angularJS, because they are private. Maybe you should make one from your DB..., but the $$hashkey seems a easy solution though.
checked attribute might throw an error, because ngModel does not exist on your tree directive template. (put at least a ? before)
A checkbox can not have as model a $$hashkey.
Ng-change and ng-click will always be called at the same time, use the simplest one.
app.directive('branch', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
b: '=src',
filter: '&'
},
template: '<li><input type="checkbox" ng-click="innerCall(b.$$hashKey)" ng-model="isChecked" ng-hide="visible" /><a>{{ b.name }}</a></li>',
link: function (scope, element, attrs) {
scope.isChecked = false;
var hasChildren = angular.isArray(scope.b.children);
scope.visible = hasChildren;
if (hasChildren) {
element.append('<tree src="b"></tree>');
$compile(element.contents())(scope);
}
element.on('click', function(event) {
event.stopPropagation();
if (hasChildren) {
element.toggleClass('collapsed');
}
});
scope.innerCall = function(hash) {
if(scope.isChecked){
scope.filter({ object: scope.b, isSelected: hash });
}
};
}
};
});
UPDATE
You have the same treeController in your tree directive and in your index.html view.
This is what causes the view not to update!
I deleted the one in your directive, otherwise you'll have a controller for each child.
You saw the good console.log message in your controller, but it was in a controller for ONE directive.
You were not accessing the controller of the index.html.
Then I fixed the filter function communication between childs :
You forgot to communicate the filter function when you append new tree's :
element.append('<tree src="b" filter="filter({ object: object, isSelected: isSelected })"></tree>');
Also, in your parent directive template, you also need the hash to send parameters to the function :
filter="filter({ object: object, isSelected: isSelected })"
I edited your Plunker HERE without changing the code with the above comments I made.
(I'm not sure what you write is not what you want and because you did not comment I rather not change it so you still undertand your code fast)
But the view is updating now!
I think a little debug with what you want and the comments above should be enough.
EDIT 2
You forgot to return an object with the property chrilden. You returned an array, which caused the problem.
function updateMyList(data) {
var transformed = { children : data };
$scope.myList = transformed;
}
Here is a working PLUNKER.
Try $scope.$apply() after adding
I am trying to create a few different directives that will work as search / filter tools for different parts of my application.
For this purpose i have created the following directive code:
app.directive("lbFilterDivision", ['divisionService', function (divisionService) {
return {
restrict: "E",
templateUrl: 'tpl/directives/lb-filters/lbFilterDivision.html',
scope: {
model: '='
},
link: function (scope, element, attr) {
scope.divisions = [];
divisionService.getList().then(function (result) {
scope.divisions = result;
})
}
};
}]);
The template attached to this is:
<select class="form-control"
ng-model="model"
ng-options="item.id as item.name for item in divisions"
fix-select-null="">
<option value="" translate="FORMS.DIVISION_PLACEHOLDER"></option>
Okay first of all let me explain the main idea.
The idea is that you have a search variable that will be passed to the directive. Then the two way binding should notify up through the system.
So say for instance i have the following HTML:
<lb-filter-division model="search.division.id"></lb-filter-division>
<li ng-repeat="user in users | filter:search"> </li>
As you can see i set the model = to search.division.id which means every time i change selected variable it should update the search.division.id variable and filter the list.
Sadly this is not the case.
Can anyone see what ive done wrong?
Edit - I found the answer. Apprently there was a syntax error in my code. Im so sorry! i will leave this code here if someone gets the same idea as my self.
Here is a fiddle:
fiddle
Solved the problem.
If you wish to copy or are looking to solve the same issue i can refer to this fiddle i made:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.users = [
{id: 1, name: "div1", division:{id: 1, name: 'hello'}},
{id: 2, name: "div2", division:{id: 2, name: 'hello2'}},
{id: 3, name: "div3", division:{id: 3, name: 'hello3'}}
]
}
myApp.directive("lbFilterDivision", function () {
return {
restrict: "E",
scope: {
model: '='
},
template: '<select ng-model="model" ng-options="item.id as item.name for item in divisions"></select>',
link: function (scope, element, attr) {
scope.divisions = [{id: 1, name:'hello'},{id: 2, name:'hello2'},{id: 3, name:'hello2'}];
}
};
});
fiddle
Good luck!
I have a fiddle at http://jsfiddle.net/skwidgets/w2X9m/3/ to build out a group of check boxes. It works just as desired in the prototype and I can even include more then one group and they run independently. As I was satisfied I add the code to the app that I am building and the html in the template: '<>' of the directive does not appear. the model data that is in the handle bars in the template does how ever. I cannot seam to figure out why as there are not errors.
I also have this plunker that shows the code working
http://plnkr.co/edit/JE5dRDU4VyGd0UAbCtNu?p=preview
<div class="sqs" >
<pre>
{{survey | json}}
</pre>
<suvey-checkbox ng-model="Q1" ng-init="surveyQuestions = [
{ 'value':'value1', 'name': 'The unit' },
{ 'value': 'value2', 'name': 'Patient Threw Up'},
{ 'value':'value3', 'name': 'Unsafe for children' },
{ 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
</suvey-checkbox>
<suvey-checkbox ng-model="Q2" ng-init="surveyQuestions = [
{ 'value':'value1', 'name': 'The unit' },
{ 'value': 'value2', 'name': 'Patient Threw Up'},
{ 'value':'value3', 'name': 'Unsafe for children' },
{ 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
</suvey-checkbox>
</div>
And
var app = angular.module("app", []);
app.run(function($rootScope){
$rootScope.survey = [];
});
app.directive('suveyCheckbox', function ($rootScope) {
return {
restrict: 'E',
require: '^ngModel',
scope: {
ngModel: '#'
},
template: '{{ngModel}}<br /><label ng-repeat="surveyQuestion in surveyQuestions" class="checkbox">' +
'<input data-role="none" type="checkbox" name="selectedExclusion[]" value="{{surveyQuestion.value}}"' +
'ng-checked="surveyAnswers.indexOf(surveyQuestion.value) > -1" ng-click="togglesurveyAnswers(surveyQuestion.value)"> ' +
'{{surveyQuestion.name}} <br /></label>{{surveyAnswers}}',
link: function (scope, elem, attr) {
// selected exclusion
scope.surveyAnswers = [];
// toggle surveyAnswers for a given answer by name
scope.togglesurveyAnswers = function togglesurveyAnswers(surveyQuestion) {
var idx = scope.surveyAnswers.indexOf(surveyQuestion);
// is currently selected
if (idx > -1) {
scope.surveyAnswers.splice(idx, 1);
}
// is newly selected
else {
scope.surveyAnswers.push(surveyQuestion);
}
};
$rootScope.survey.push(scope.surveyAnswers);
}
}
});
I took the code from the prototype in the fiddler that is linked and that is not working for some reason.
The code will not work in newer versions of angular. In previous versions there was a bug that caused isolate scope to not be really isolate and leak out to other directives.
In angular 1.2.x isolate scope is truly isolate. This means that you cannot use anything in your template unless the directive either put it manually into the scope or it is included in the isolate scope definition (e.g. scope: { myVar: '='})
For example, in your case your template cannot access surveyQuestions because it was not defined in the private scope (ng-init will not be able to access the isolate scope inside of your surveyCheckbox directive.
If you want to be able to use surveyQuestions in your directive's template you need to pass it in to the isolate scope:
<survey-checkbox questions="surveyQuestions" ng-model="bedsideQ2" ng-init="surveyQuestions = [
{ 'value':'value1', 'name': 'The unit' },
{ 'value': 'value2', 'name': 'Patient Threw Up'},
{ 'value':'value3', 'name': 'Unsafe for children' },
{ 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
</survey-checkbox>
And then add it to your isolate scope:
scope: {
ngModel: '#',
surveyQuestions: '=questions'
}
I am new to angularjs and working to directive for a dropdown but having problem to select initial value. I have to pass the Id of the option to select as an attribute to the directive. I am setting the attribute value in a scope variable which I then use in ng-Init.
Here is my directive code:
export class ChoiceGroup
{
constructor ()
{
var directive: ng.IDirective = {};
directive.restrict = "E";
directive.replace = true;
directive.template = '<div><select name="cmbCG" ng-model="dataSel" ng-options="c.DisplayName for c in data"></select></div>';
directive.link = function ($scope: any, element: JQuery, attributes: any) {
var injector = angular.element(document).injector();
var key = attributes.key;
var cgCacheService: ChoiceGroupsCacheService;
seCGCacheService = injector.get('seChoiceGroupsCacheService');
var values: Array<ChoiceValue>;
values = seCGCacheService.GetChoiceValues(key);
$scope.data = values;
if (attributes.selectedvalue) {
$scope.selectedvalue = values[attributes.selectedvalue];
}
}
return directive;
}
The code is in Typescript. Here is HTML:
<choicegroupcombo key="RecurrenceFrequency" selectedvalue="3"></choicegroupcombo>
If I hardcode the value of dataSel ie ng-init="dataSel=3" then it works fine but when I set to scope variable then it does not work. So how can I fix the issue.
EDIT
Solved. I have updated the code accordingly.
I think this might be a classic case of "over-engineering".
Your code doesn't seem to be trying to do anything other than what a standard select box does.
Try this instead:
app = angular.module('app', [])
app.controller 'MainCtrl', ($scope) ->
# $scope.values = ChoiceGroupsCacheService(key)
$scope.values = [
{ id: 0, label: 'Zero' }
{ id: 1, label: 'One' }
{ id: 2, label: 'Two' }
{ id: 3, label: 'Three' }
]
$scope.number = 2
and the view:
<select ng-model="number" ng-options="item.id as item.label for item in values"></select>
Code is in coffeescript:
Here's a plunkr: http://plnkr.co/edit/C6qmUoJ6HjsAT69oavRg
I have a directive that uses the $compile service to generate a template. It won't generate the select options using ng-options or ng-repeat, even though I clearly have the users array set in my scope. Why doesn't this work? This just gives me a blank <select> field with no options.
angular.module("myApp").directive("selectForm", [
'$compile',
function($compile) {
return {
restrict: 'C',
scope: true,
link: function(scope, element, attrs) {
scope.users = [
{ id: 1, name: "User 1" },
{ id: 2, name: "User 2" }
];
element.on('click', function(e) {
var selectHtml = $compile('\
<select\
class="col-lg-2 form-control"\
ng-options="user.id as user.name for user in users">\
</select>\
')(scope);
$(element).html(selectHtml);
});
}
}
}
]);
There is something to change in your code to make it work:
<select> works only when you also supply ng-model
Wrap your code inside scope.$apply.
Call element.off("click") to unsubscribe to the event to avoid flickering.
DEMO