So, I'm new to AngularJS and I'm trying to change a div content after another is clicked (this one holds a div with the content that I want to put on the first one).
HTML
<div ng-controller="dCtrl">
<ul ng-repeat="product in products">
<li change>
{{product.name}}
<div class="hide">{{product.description}}</div>
</li>
</ul>
</div>
<div id="test"></div>
Javascript
var app = angular.module("dt", []);
app.directive("change", function() {
return function(scope, element) {
element.bind("click", function() {
var message = element.children("div").text();
console.log("breakpoint");
angular.bind("#test", function() {
this.text(message);
});
})
}
})
app.controller("dCtrl", function($scope) {
$scope.products = [
{ "name" : "Escova XPTO", "description": "Lava tudo num instante"},
{ "name" : "Pasta de Dentes YMZ", "description": "Dentifrico do camandro"}
];
})
I know that I could just say:
$("#test").html(message);
But I'm still confused about mixing jQuery and AngularJS, I dont know if that is a correct way of doing it
Thanks
Setup ng-click:
ngClick is for doing things such as the scary jQuery-esque stuff you have going on in your change directive. Place ng-click in your clickable div's attributes and pass in a method that changes the $scope variable accepted by...
ngShow and ngHide.
When true these directives, as the name states, show or hide the associated html object. You can pass in $scope variables determine the boolean value. When the $scope updates these methods automatically update the DOM to show/hide the element.
Related
This is a little difficult to explain since I can't extract the code that I'm having the most difficulty with. The best I can do is a simple fiddle of what I'm trying to accomplish: https://jsfiddle.net/yLkukw5p/
HTML:
<div ng-app = "myApp" ng-controller = "parentController" ng-switch = "properties.selectedMethod">
<div ng-controller = "childController" ng-switch-when = "id">
<a ng-click = "survey()">
Change div
</a>
</div>
<div ng-switch-when = "date">
div changed
</div>
</div>
JS:
var app = angular.module('myApp', []);
app.factory('vars', function() {
var properties = {};
properties.selectedMethod = 'id';
function setselectedMethod(string){
properties.selectedMethod = string;
}
return {
properties : properties,
setselectedMethod : setselectedMethod
};
});
app.controller('parentController', function($scope, vars) {
$scope.properties = vars.properties;
$scope.setSearchMethod = function(method){
vars.setselectedMethod(method);
}
});
app.controller('childController', function($scope, $rootScope, $http, vars) {
$scope.properties = vars.properties;
$scope.survey = function() {
vars.setselectedMethod("date");
}
});
Basically, I want to be able to change the variable value in a factory shared between child and parent controllers. The only hiccup I'm running into is that in my case, the child div is dynamically generated, and that seems to be the only thing different between the fiddle and my code. I have some JavaScript that adds this DOM:
<div onclick = angular.element('#anotherdiv').scope().setSearchMethod('id');> More Info </div>
where anotherdiv is a div within the childController. When I click this div, I know by debugging that it runs the code in the vars factory, but it doesn't update other values? I'm using the "dot" trick so I would think the variables are references and not "shadowing" as some other posts suggested. Any thoughts?
EDIT: Updated the fiddle to be more accurate: https://jsfiddle.net/yLkukw5p/1/
It looks like the onclick function using angular.element is the one causing trouble, but I don't know how to work around it.
I'm building a "tour guide" for my angular powered website.
I looked around for options and Intro.js seemed like the best fit. It had an Angular Directive already ready and everything: Angular Intro.js.
Everything worked as expected, until I had to add a step to first (and only the first) a DOM object that is being injected by a ng-repeat binding. I gave all ng-repeat items a unique ID (via $index) but Intro.js just fails to acknowledge it.
I'm guessing Intro is trying to find the DIV by the ID specified, but since the ng-repeat isn't complete yet, there's no DIV by that name.
I made a plunker where you can see that it' working on static content but fails to aknowledge the objects inside the ng-repeat.
Relevant code:
HTML:
<!-- Works -->
<div id="static">This is static content.</div>
<!-- Doesnt work -->
<div id="item{{$index}}" ng-repeat="item in items">
{{ item.name }}
</div>
Angular Controller:
$scope.IntroOptions = {
steps:[
{
element: document.querySelector('#static'),
intro: "This is static content"
},
{
/** ID "item0" belongs to the first element on the ng-repeat **/
element: document.querySelector('#item0'),
intro: "Doesnt work!"
}
],
showStepNumbers: false,
exitOnOverlayClick: true,
exitOnEsc:true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
Plunker: http://plnkr.co/edit/kE8P5Kq2Y5CVWEYgyBIo?p=preview
Assuming the reason above is the reason this isn't working, how do I
make the directive wait for the DOM to be "ready"?
If my assumption is wrong, why isn't it working then?
.directive('onLastRepeat', function() {
return function(scope, element, attrs) {
if (scope.$last) setTimeout(function(){
scope.$emit('onRepeatLast', element, attrs);
}, 50);
};});
Use this directive like this :
<div id="item{{$index}}" ng-repeat="item in items" on-last-repeat>
{{ item.name }}
</div>
in your controller wait for finish the loop and call introjs
$scope.$on('onRepeatLast', function (eve, elem) {
//call intro
});
The most clueless approach I'd attempt at first would be to wrap the dynamic content:
<div id="dynamic">
<div id="item{{$index}}" ng-repeat="item in items">
{{ item.name }}
</div>
</div>
The scope variable then becomes
$scope.IntroOptions = {
steps:[
{
element: document.querySelector('#static'),
intro: "This is static content"
},
{
element: document.querySelector('#dynamic'),
intro: "This is dynamic content"
}
],
// ... cut ...
It looks like your original code is deadlocking: the view depends on the data ($scope.items) which depends on the view (IntroOptions)
You can observe for the $viewContentLoaded event that $rootScope will broadcast.
I know this is quite old, but if anyone stumbles upon this answer, the best thing to do is to use a getter, it gets evaluated the moment it needs to access the property:
$scope.IntroOptions = {
steps:[
{
element: document.querySelector('#static'),
intro: "This is static content"
},
{
/** ID "item0" belongs to the first element on the ng-repeat **/
get element(){return document.querySelector('#item0')},
intro: "Doesnt work!"
}
],
showStepNumbers: false,
exitOnOverlayClick: true,
exitOnEsc:true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
I'm using angular js bootstrap tooltip to show tooltips on a set of elements.
Plunker: http://plnkr.co/edit/9xk41f3CR0wnajN71bSi
I need to inject into the tooltip html compiled by angular, but i don't really get how. The tooltip tutorial is not useful to me because it gets the html from the scope as variable, but for a set of elements this is not possible.
How can i fill tooltip-html-unsafe?
You can do something like this:
HTML:
<li ng-repeat="phone in phones">
<div phone-info index="{{$index}}">
<p tooltip-html-unsafe="{{tooltips[$index] }}">A tooltip should appear on top of this line ({{ phone.name }} - {{ phone.snippet }})</p>
<div>
</li>
Add to controller:
$scope.tooltips = [];
Directive:
app.directive('phoneInfo', function($compile, $timeout) {
/* wrap in root element so we can get final innerHTML*/
var tipTemplate = '<div><p> This will be the content of {{phone.name}} injected in the tooltip </p><div>';
return {
link: function(scope, el, attrs) {
var tipComp = $compile(tipTemplate)(scope)
$timeout(function() {
scope.tooltips[attrs.index] = tipComp.html()
});
}
}
})
Used index to avoid creating an isolated scope. Can also be done with isolated scope and create a property of phone instead of using scope.tooltips[index]
DEMO
I have a layout with multiple elements which are able to gain target. I need to target only one element at the time.
Is it possible to define a function on the $scope that receives an object from the model (for example a line item belonging to an invoice) and tell Angular to add a css class wherever the view of this model is?
If I use the ng-class directive, it would force me to add ng-class to all "targetable" elements in the html and each element should know if it is the current target or not. I don't want to add an isTarget() function to each possible element because it will dirty the model.
Example:
This is the html:
<p>{{document.shipFrom}}</p>
<p>{{document.shipTo}}</p>
<ul>
<li ng-repeat="item in document.items">{{item.description}}</li>
</ul>
And this is the controller:
angular.module('myApp').controller('DocumentCtrl', function($scope){
$scope.document = {
shipFrom: 'Origin',
shipTo: 'Destination',
items: [
{description:'item1'},
{description:'item2'}
]
};
})
Is there a way to define $scope.setTarget($scope.document.items[0]) so that it adds a class "on-target" to the element? Note that all the document properties (the items and the shipFrom/To) can gain target.
Edit: Solved
I found a way to get a model's attribute value in my directive's linking function. If I use the $parse service then I can evaluate the model's property attached to the directive simply by instantiating a getter function:
link: function postLink ($scope, $iElement, $iAttrs) {
var valueGetter = $parse($iAttrs.ngModel);
//Then, I can subscribe the directive to a custom event:
$scope.$on('set.target', function (event, elem) {
$iElement.removeClass('on-target alert-info');
//Now it gets the actual value of the model related to the directive
var value = valueGetter($scope);
//If both the model and the event's value are the same, then focus the element.
if (value == elem) {
$iElement.addClass('on-target alert-info');
$scope.setTarget(valueName, elem);
$scope.$apply();
}
return;
});
}//end link function
When I need something to gain target from the controller, then I just do $scope.$broadcast('set.target', $scope.document.shipFrom)
HTML Part :
<p>{{document.shipFrom}}</p>
<p>{{document.shipTo}}</p>
<ul>
<li ng-repeat="item in document.items" ng-click="setTarget(item.description)" ng-class="{'active' : selectedTarget == item.description}">{{item.description}}</li>
</ul>
Controller:
$scope.document = {
shipFrom: 'Origin',
shipTo: 'Destination',
items: [
{description:'item1'},
{description:'item2'}
]
};
$scope.selectedTarget = '';
$scope.setTarget = function(data) {
$scope.selectedTarget = data;
};
DEMO
If you don't want to add an isTarget() function to each possible item, you could add isTarget method on document.
isTarget: function(item){
return this.target === item;
}
and change the html to
<li ng-repeat="item in document.items" ng-class="{'on-target': document.isTarget(item)}">{{item.description}}</li>
I am using "draggable" directive to support image dragging. However, as per the role of the user, I need to disable image dragging for certain groups of users. I have used following code.
<!--draggable attribute is used as handle to make it draggable using jquery event-->
<li ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box">
<!-- Images and other fields are child of "li" tag which can be dragged.-->
</li>
The method dragSupported is in the template scope and returns true or false. I don't want to create two big duplicate <li> elements by using ng-if for each value returned by dragSupported(). In other words, I am not looking for the following approach to solve this.
<!--draggable attribute is used as handle to make it draggable using jquery event-->
<li ng-if="dragSupported() ==true" ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box">
<!-- Images and other fields are child of "li" tag which can be dragged.-->
</li>
<!--remove "draggable" directive as user doesn't have permission to drag file -->
<li ng-if="dragSupported() !=true" ng-repeat="template in templates" id="{{template._id}}" type="template" class="template-box">
<!-- Images and other fields are child of "li" tag which can be dragged.-->
</li>
Is there any other approach to avoid code duplicity?
ng-attr-<attrName>
Support for conditionally declaring an HTML attribute is included with Angular as the dynamically-titled ng-attr-<attrName> directive.
Official Docs for ng-attr
Example
In your case, the code might look like this:
<li
id="{{template._id}}"
class="template-box"
type="template"
ng-repeat="template in templates"
ng-attr-draggable="dragSupported() === true"
></li>
Demo
JSFiddle
This contains examples of usage for the following values: true, false, undefined, null, 1, 0, and "". Note how typically-falsey values may yield unexpected results.
Thanks Jason for your suggestion. I took little different approach here. Since I don't want to change the "scope" variable therefore I used "attrs" to check if drag is allowed or not. Following is approach I tool which seems good so far.
Directive code:
app.directive('draggable', function () {
return {
// A = attribute, E = Element, C = Class and M = HTML Comment
restrict: 'A',
replace:true,
link: function (scope, element, attrs) {
if(attrs.allowdrag =="true")
{
element.draggable({
cursor: 'move',
helper: 'clone',
class:'drag-file'
});
}
}
}
});
HTML Code:
<ul>
<!--draggable attribute is used as handle to make it draggable using jquery event-->
<li ng-repeat="template in templates" draggable allowdrag="{{userHasPrivilege()}}" >
<!--Ohter code part of li tag-->
</li>
</ul>
Controller is having implementation of userHasPrivilege().
Not sure if this is correct way or not. Looking for thoughts.
There is no way to directly add or remove an attribute from an element. However, you could create a directive that simply adds the attribute to the element when the condition is met. I've put something together that illustrates the approach.
Demo: http://jsfiddle.net/VQfcP/31/
Directive
myApp.directive('myDirective', function () {
return {
restrict: 'A',
scope: {
canDrag: '&'
},
link: function (scope, el, attrs, controller) {
/*
$parent.$index is ugly, and it's due to the fact that the ng-repeat is being evaluated
first, and then the directive is being applied to the result of the current iteration
of the repeater. You may be able to clean this by transcluding the repeat into the
directive, but that may be an inappropriate separation of concerns.
You will need to figure out the best way to handle this, if you want to use this approach.
*/
if (scope.canDrag&& scope.canDrag({idx: scope.$parent.$index})) {
angular.element(el).attr("draggable", "draggable");
}
}
};
});
HTML
<ul>
<!-- same deal with $parent -->
<li ng-repeat="x in [1, 2, 3, 4, 5]" my-directive="true" can-drag="checkPermissions(idx)">{{$parent.x}}</li>
</ul>
Controller
function Ctl($scope) {
$scope.checkPermissions = function(idx) {
// do whatever you need to check permissions
// return true to add the attribute
}
}
I used a different approach as the previous examples didn't work for me. Perhaps it has to do with using custom directives? Perhaps someone can clear that up.
In my particular example, I'm using ui-grid, but not all ui-grids should use pagination. I pass in a "paginated" attribute and then $compile the directive based on true/false. Seems pretty brutish but hopefully it can push people in a positive direction.
HTML
<sync-grid service="demand" paginated="true"></sync-grid>
Directive
angular
.module('app.directives')
.directive('syncGrid', ['$compile', SyncGrid]);
function SyncGrid($compile){
var nonPaginatedTemplate = '' +
'<div>' +
' <div ui-grid="gridOptions" class="grid"></div>' +
'</div>';
var paginatedTemplate = '' +
'<div>' +
' <div ui-grid="gridOptions" class="grid" ui-grid-pagination></div>' +
'</div>';
return {
link: link,
restrict: 'E',
replace: true
};
function link(scope, element, attrs) {
var isPaginated = attrs['paginated'];
var template = isPaginated ? paginatedTemplate : nonPaginatedTemplate;
var linkFn = $compile(template);
var content = linkFn(scope);
element.append(content);
// Continue with ui-grid initialization code
// ...
}
}