I have the following code in my html.
<div id="section">
<div new-exercise ng-repeat="section in sections track by $index">
</div>
</div>
<div class="add_exercise add_exercise_btn">
<a class="add_exercise_link" ng-click="addExercise()">
<span>+ Add an Exercise</span>
</a>
</div>
the method addExercise() adds a new element to the variable sections, hence updating the html with another template (represented by directive new-exercise).
i.e.
$scope.addExercise = function(){
$scope.sections.push({
title: "hello",
content: "fsa"
});
}
The directive new-exercise:
.directive('newExercise', function () {
return {
templateUrl: '/templates/exercise-form.html',
replace: true,
}
})
The template exercise-form.html:
<div class="add_exercise" id="add_exercise_form" data-section-id="{{id}}">
<form class="new_section">
<div class="input-box">
<input id="title" type="text" name="title" class="form-control" value="{{section.title}}" ng-model="section.title">
<label for="title">Exercise Name</label>
<span class="help-block"></span>
<span>{{ section.title }}</span>
</div>
</form>
</div>
I expect the template exercise-form.html to update the value inside input to be hello but the scope is empty.
However, if I remove the directive and add the template html under ng-repeat it works as I expect. I feel that the scope is lost due to directive, but not so sure about the exact reason. Can anyone explain me the reason and how to resolve?
Thanks.
Remove the replace: true in your directive.
Corrected directive given below:
.directive('newExercise', function () {
return {
templateUrl: '/templates/exercise-form.html'
}
})
Related
I have a piece of code on which angularjs ng-message doesnot seem to work.
Here is a JSfiddle
<div ng-app="app" ng-controller="myctrl">
<form name="myform" novalidate>
error: {{myform.definition.$error}}
<textarea ng-blur="handleBlur(myform)"
name="definition"
ng-model="$ctrl.definition"
ng-blur="$ctrl.handleBlur(myform)">
</textarea>
<div ng-messages="myform.definition.$error">
<div ng-message="validationError">
Please enter a value for this field.
</div>
</div>
</form>
</div>
controller:
angular.module('app', []).controller('myctrl', function($scope) {
$scope.someval = true;
$scope.handleBlur = function(form) {
form.definition.$error.validationError = false;
$scope.someval = !$scope.someval
form.definition.$error['validationError'] = $scope.someval;
}
})
From the docs, https://docs.angularjs.org/api/ngMessages#dynamic-messaging
Feel free to use other structural directives such as ng-if and
ng-switch to further control what messages are active and when. Be
careful, if you place ng-message on the same element as these
structural directives, AngularJS may not be able to determine if a
message is active or not. Therefore it is best to place the ng-message
on a child element of the structural directive.
From:
<div ng-messages="myform.definition.$error">
<div ng-message="validationError">
Please enter a value for this field.
</div>
</div>
To:
<div ng-messages="myform.definition.$error">
<div ng-if="showRequiredError">
<div ng-message="validationError">
Please enter a value for this field.
</div>
</div>
</div>
I want to create a directive which allow me to generate validation message near input - based on ngMessages(as in example).I have this working HTML example:
<div class="field">
<div class="ui right icon input">
<input type="email" name="email" ng-model="vm.user.email" placeholder="E-mail" required>
<i class="at icon"></i>
</div>
<div ng-messages="vm.signUpForm.email.$error" ng-show="vm.signUpForm.$submitted">
<div ng-messages-include="shared/validation/formErrorMessages.html"> </div>
</div>
</div>
My current directive:
var app = angular.module('app.directives', []);
app.directive('formError', function() {
return {
restrict: 'AE',
replace: 'false',
scope: {
statement: '#',
error: '#'
},
template: '<div ng-messages="error" ng-show="true"><div ng-messages-include="shared/validation/formErrorMessages.html"></div></div>'
};
});
And how I tried to run it:
<div form-error error="{{ vm.signUpForm.email.$error }}" statement="{{ vm.signUpForm.$submitted }}"></div>
It's not working - message won't appear - without any error. On message show I will also want to add class 'error' to 'div.field', but it should be easy.
Any idea how to make this directive work or maybe how to handle this in another, more comfortable way?
You made a a mistake, you should pass attributes to directive with
scope: {
statement: '=',
error: '='
},
# biding is for passing string values, not objects and error is an object, so passing it that way will not work as expected. Of course you could use attr.$observe and JSON.parse, but that is not what you wanna do here.
https://plnkr.co/edit/iRRPqLpmqdQltNjw35Nb?p=preview
Edit: Thanks to Simon Schüpbach, I was able to resolve the issue by changing the template. See the end for the solution.
Let's preface this by saying that we are beginner to soft-intermediate in Angular.
On one of our project, we are using angularjs 1.4.x and also ng-cart (https://github.com/snapjay/ngCart). It worked great but then we were confronted with a demand from our client that created new weird issues.
We added fsCounter, as a directive, to the cart page so user can add or remove items. This all work great but the users also have the option to delete an item from the cart view. Deletion works as expected BUT it seems to affect the scope to the item that takes it place.
Let me make it clearer :
Let's say we have 2 products in our cart page, it displays something like that
Product_1 {price} {counter} {total} delete_btn
Product_2 {price} {counter} {total} delete_btn
Each fsCounter is its own scope
return {
restrict: "A",
scope: {
value: "=value",
index: "=index"
},
link: //other logic
However when we delete the first item, visually and in the directives, the data seems to shift. So our second row will now inherit the first row's counter.
Directive's data looks like this:
Product_1:
itemId:3,
quantity:2,
{other data}
Product_2:
itemId:8,
quantity:5,
{other data}
But once we delete the first directive (We get the scope, remove the DOM element, destroy the scope) the second directive will now have this data:
Product_2:
itemId:3,
quantity:2,
{other data}
Here is the template code :
<div class="unItem" ng-repeat="item in ngCart.getCart().items track by $index">
<div class="photo"><img src="{[{ item.getImage() }]}" alt=""></div>
<div class="details">
<h3>{[{ item.getName() }]} <span>{[{ item.getPrice() | currency:$}]}</span></h3>
<md-select ng-model="attributes" placeholder="Attribut" class="select-attribut" ng-show="item.hasAttributes()" ng-change="item.updateSelected(attributes)">
<md-option ng-repeat="attr in item.getAttributes()" ng-selected="attr == item.getSelected()" ng-value="attr">{[{ attr }]}</md-option>
</md-select>
</div>
<div class="quantity">
<div fs-counter-dynamic value="itemQuantity"
data-min="1"
data-max="999"
data-step="1"
data-addclass="add-quantity"
data-width="130px"
data-itemid="{[{ item.getId() }]}"
data-editable
ng-model="itemQuantity"
name="quantity" id="quantity-{[{ item.getId() }]}",
index="{[{ item.getId() }]}"
></div>
</div>
<div class="total">Total : {[{ item.getTotal() | currency }]}</div>
<div class="delete"><a ng-click="ngCart.removeItemById(item.getId());"></a></div>
</div>
Is this normal behavior? Is there any way to force the directive to keeps its own data? From what I've understood, each directive has its own scope, so what I think happens is that, when we remove the first one, it keeps the data stored in some kind of array that says "directive 1 data is : " and when we delete the first directive, the second one becomes the first.
So basically, are we doing anything wrong or is there anyway to remap the data?
Hope it was clear enough,
Thanks!
Edit: added html code
Edit2: Answer :
New FsCounter template looks like this:
<div fs-counter-dynamic value="item._quantity"
data-min="1"
data-max="999"
data-step="1"
data-addclass="add-quantity"
data-width="130px"
data-itemid="{[{ item.getId() }]}"
data-editable
ng-model="item._quantity"
name="quantity" id="quantity{[{ item.getId() }]}"
></div>
Do you know ng-repeat, then you don't have such problems
<div ng-repeat="product in products">
<fs-counter index="product.index" value="product.value"></fs-counter>
</div>
and in your controller
$scope.products = [
{index:1, value:"Cola"},
{index:2,,value:"Fanta"}
]
to remove an element you just have to do
$scope.products.splice(0,1);
Edit:
I suggest to save all necessary data inside the item you use inside ng-repeat. Your problem is, that you mix data from array with other data from your $scope. It is possible to $watch changes in your directive, but if you set them with ng-repeat everything is done automatically.
$scope.products = [
{index:1, name:"Cola", price:1.50, image:"your/path.png", attributes:{...}},
{index:2, name:"Fanta", price:1.40, image:"your/path.png"}
]
And then in your html
<div class="unItem" ng-repeat="item in ngCart.products track by $index">
<div class="photo"><img ng-src="item.image" alt=""></div>
<div class="details">
<h3>{{item.name}} <span>{{item.price | currency}}</span></h3>
</div>
<div class="quantity">
<div fs-counter-dynamic value="item.quantity"
data-min="1"
data-max="999"
data-step="1"
data-addclass="add-quantity"
data-width="130px"
data-itemid="item.index"
data-editable
ng-model="item.quantity"
name="quantity" id="{{'quantity-' + $index}}",
index="item.index"
></div>
</div>
<div class="total">Total : {{ item.price * item.quantity | currency }}</div>
<div class="delete"><a ng-click="ngCart.removeItemById(item.index);"></a></div>
</div>
This is my situation in psuedo code
<div data-ng-controller="test">
<div isolated-directive>
<select ng-model="testControllerScopeVar">...</select>
</div>
<div ng-if="some condition that uses testControllerScopeVar"></div>
</div>
This worked perfectly before I added isolated-directive, now that it is added (scope: true) the ng-if no longer works because I think it is getting eat up inside of the directive.
What is the most efficient way to get this working without touching the structure of the html and isolated-directive?
Well it seems once I know the solution, it is so simple
<div data-ng-controller="test as testCtrl">
<div isolated-directive>
<select ng-model="testCtrl.testControllerScopeVar">...</select>
</div>
<div ng-if="testCtrl.testControllerScopeVar == 'whatever'"></div>
</div>
ControllerAs allows me to specifically access the right scope and works perfectly, thanks all for your time and input
One approach is to map the controller variable into your isolated scope and attach the isolated scope variable to your internal ng-model.
So your HTML would look like this:
<div data-ng-controller="test">
<div isolated-directive="testControllerScopeVar">
<select ng-model="isolatedScopeVar">...</select>
</div>
<div ng-if="some condition that uses testControllerScopeVar"></div>
</div>
And your directive declaration would look like this:
app.directive('isolatedDirective', function () {
return {
scope: {
isolatedScopeVar: '=isolatedDirective'
}
};
});
You can try jQuery to get the value and assign it to a new scope variable. Something like this
HTML
<div ng-app="TestApp">
<div data-ng-controller="test">
<div isolated-directive>
<input id="isolatedVar" ng-model="testControllerScopeVar" />
</div>
<div>
{{isolatedVar}}
</div>
</div>
</div>
JS
var app = angular.module('TestApp', []);
app.controller('test', function($scope) {
var element = angular.element(document.querySelector('#isolatedVar'));
element.bind('keyup', function() {
$scope.isolatedVar = element.val();
console.log($scope.isolatedVar);
$scope.$watch('isolatedVar', function() {});
});
});
app.directive('isolatedDirective', function() {
return {
scope: true
};
});
Working fiddle https://jsfiddle.net/kavinio/yzb8ouzd/1/
I'm having the following problem:
I want to use a directive at different places in an app and don't want to specify the parent object and directive object every time i use the directive.
Look at this plnkr:
http://plnkr.co/edit/yUoXXZVJmoesIQNhoDDR?p=preview
Its just a $scope.data object that stores a multilevel array.
$scope.data=
[
{"name": "LEVEL0_A", "subitems":
[
{"name":"Level1_A", "subitems":[{"name":"A"},{"name":"B"}]},
{"name":"Level1_B", "subitems":[{"name":"C"},{"name":"D"}]},
...
...
and so on
and there is a little sample custom directive, called deleteItem, that does exactly that.
.directive('deleteItem', function() {
return {
scope:{
item:'=',
parent:'='
},
template: '<ng-transclude></ng-transclude>Delete',
transclude:true,
controller: function($scope){
$scope.deleteItem=function(currentItem,currentParent){
currentParent.subitems.splice(currentParent.subitems.indexOf(currentItem),1);
};
}
};
});
here you see the html template
<body ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="level0 in data">
<h2>{{level0.name}}</h2>
<div ng-repeat="level1 in level0.subitems">
<div delete-item parent="level0" item="level1">
{{level1.name}}
</div>
--------------------
<div ng-repeat="level2 in level1.subitems">
<div delete-item parent="level1" item="level2">
Name: {{level2.name}}
</div>
</div>
<hr>
</div>
</div>
</div>
</body>
I mean it works, but actually i feel that there must be some way finding the item and parent without specifically linking them to the scope manually.
I'd be really glad if someone could point me in the right direction.
Thanks
Markus
If you do something like this.
$scope.deleteItem=function(currentItem,currentParent){
currentParent.subitems.splice(currentParent.subitems.indexOf(currentItem),1);
};
Then your directive becomes dependent upon the structure of data outside it's scope. That means that the directive can only delete items if it follows exactly that pattern. What if you want to use the delete button on data that isn't from an array?
The better approach is to use the API feature & to execute an expression on the outer scope.
app.directive('deleteItem', function () {
return {
scope: {
remove: '&deleteItem'
},
template: '<ng-transclude></ng-transclude><a ng-click="remove()">Delete</a>',
transclude: true
};
});
When the user clicks "Delete" the remove() API is called and the template handles how that item is removed.
<div ng-repeat="level0 in data">
<h2>{{level0.name}}</h2>
<div ng-repeat="level1 in level0.subitems">
<div delete-item="level0.splice($index,1)">
{{level1.name}}
</div>
--------------------
<div ng-repeat="level2 in level1.subitems">
<div delete-item="level1.splice($index,1)">
Name: {{level2.name}}
</div>
</div>
<hr>
</div>
</div>