ko.dataFor(element) allows to retrieve the object bound to a DOM element. Does angular have a similar function?
Maybe you can use:
angular.element(element1).scope().variable
element1: dom element,
variable: scope variable
More information here.
AngularJS have a different approach on that and data is not strictly bounded to DOM elements, You probably can look up for two way data binding that will bring you closer to the answer
Don't bind data to DOM elements in the first place. Store data in for example angular services.
Related
Trying to have 2 way binding on an AngularJS directive while using primitive objects is not working, for example:
<custom-directive ng-model="variable"></custom-directive>
how can this be achieved?
In order to have 2 way binding in javascript (not just angularjs), we have to pass an object (this is caused by javascript's evaluation strategy - can read more about it here https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_sharing). basically what is happening is that when we pass a primitive variable, its been passed by value and re-created, instead of been passed by reference. only objects are passed by reference.
So this issue can be solved by passing the variable's parent object, for example:
<custom-directive ng-model-name="variable" ng-model-parent="parentObj"></custom-directive>
and then, modifying in object in the directive as following:
parentObj[variable] = "whatever";
this way, we will keep the connection between the variable to the parentObj.
another option would be passing the model with the parent obj, for example:
<custom-directive ng-model="parentObj.variable"></custom-directive>
the dot is an important part of this example. its actually a best practice by angular to always pass variables with the parentObj-dot-property.
for additional information, angularjs actually has a documentation about it https://github.com/angular/angular.js/wiki/Understanding-Scopes
I just realized that if your directive isn't inside an ng-if it will work with primitive bindings. Maybe the problem is that your bind is inside an ng-if. Try to use ng-show instead. Maybe it will work.
Passing the primitive this way:
<custom-directive ng-model="parentObj.variable"></custom-directive>
How do you implement one-way binding? Please provide some explanation on why and when you would use one-way binding.
I'm new to AngularJS.
Please provide some explanation on why and when you would use one-way binding.
Possible Reasons:
You want to speed up your app.
You want your Angular 1 to have an easier upgrade path to Angular 2
You have a value that you want to pass to several children, but when the children change the value, you don't want the other children to sync this change.
How do you implement one-way binding?
Before Angular 1.5 you can make a make a deep copy of your object with angular.copy once you pass it in, so e.g. myVal = angular.copy(myVal). After Angular 1.5, you can use < in your bindings, which would then look like that:
bindings: {
myVal: "<"
}
However, note that if myVal is an object, you'll still have to do the deep copy using angular.copy, the "<" only works for non-object values. See the following plunkr to see what I mean.
I'm new to AngularJS.
I've heard more than 100 times that I must not use controller to manipulate DOM. I know it's about flexibility but, I want to see some examples.
Does DOM manipulation include value change in VIEW?
Please explain in easy way.
In yesterday I help someone that want to do DOM manipulation in controller, you can take a look at this thread: Insert directive into the DOM using jqlite
My app have multiple bootstrap tables and i want to create a global angularjs directive for sorting these tables to use this custome directive.
I have tried few but they don't help me enough what i want.
Please find plunk below for example.
http://plnkr.co/edit/BFkWWWtuZK4x6dHiEy3I
In the above example is not sorting as the scope is not updated.
So your directive isn't manipulating the outside scope. It can't do that because it doesn't have access to the variables in the parent scope because javascript is copy by value. You can manipulate what you are passed, but you can't manipulate the value of variable that was passed to you. So angularjs wants you to put objects between you and the references you are binding between so manipulations in across isolated scopes will propagate back to the caller. So if you modify your app to use that it works.
http://plnkr.co/edit/6sqQZk
Now it's a bit messy for my tastes. I'd probably move the whole table definition into the directive, and let it handle the whole thing. It would also make it easier to setup a sorting table without all of the plumbing, but that's up to you.
I'm trying to use AngularJS to query the DOM of my view. I need to get all of the elements that have the attribute 'data-placement' with the value of 'top'. In jQuery, I would do this:
var elements = $('[data-placement="top"]');
However, I don't know how to do it with AngularJS. Can someone tell me how to do this?
Thank you!
In AngularJS you won't do direct DOM manipulation from the controller, you should create a directive to to that. Inside the directive you can use JQuery as you wish.
Anyway you I think you can use angular.element() with a JQlite selector, here's the documentation of angular.element.
Example:
// find('#id')
angular.element(document.querySelector('#id'))
From your question I understand that you wanted to find elements with atrributes requiring certain condition in that case we can use $document.
You can find more info about it here.
So coming to your requirement, you can find it by.
$document.find("[attribute-name='attribute-value')");
That will return the element object wrapped in jQuery or jqLite. But to use it you need to inject $document into your controller. So you continue angular related operations with it.
Another approach to this is angular.element.
angular.element.find("[attribute-name='attribute-value')");
But this will return element with wrapped raw DOM element or HTML string as a jQuery element. you can find more info about it here
I prefer to use $document as Angular operations can be done using the first method.