I have a directive that will remove DOM elements from a page under certain conditions. It'll first remove the child elements, and then remove the parent. It works fine, but if there is another directive on the element, I can see some errors show up. I'm thinking it has to do with the scope of the other directive still existing after the element is removed.
What is the proper way to handle something like this? Do I need to destroy the scope of the other directive? The directive that removes the element has an inherited scope, and the other directive on the same element usually has an isolated scope.
Related
I have a custom element on my page and need to access a variable on the app.js from the custom element. Is the only way to bind the data I need to the custom element?
<custom-element data.bind="data"></custom-element>
The reason I ask is that I am running a loop to create multiple custom-elements and don't want to bind 5 variables to each custom element like that. Just asking if there is another way?
A custom element's template cannot access the outer scope. This is by-design. It ensures custom elements are portable. This mirrors the way standard elements work such as <div>, <a>, etc. You can use those elements anywhere. The only way to pass them data is via their attributes.
If you want to tightly couple your custom element to the outer view model, you could do something like this:
<custom-element app.bind="$this"></custom-element>
but this is not recommended
I have an angular directive on a table, which wraps the original element in a div. It also clones the table body from the original element, and creates a new table element and appends the cloned body to the new table element, which gets appended to the wrapping div.
This normally works fine, however we've spotted that where there is an ng-repeat inside the body of the original element e.g repeating the rows, then it fails to work.
I've tried compiling the cloned body element but that makes no difference. I've also tried giving the directive a higher priority than ng-repeat, so that the directive runs first, however that's not made any difference either.
Any idea on what else I can try to fix this?
I had been putting all the code in the Link function. Came across an interesting article compile and link functions inside AngularJS directives by Jurgen Van de Moere which was very helpful. I've now created a separate compile and post link function. I also found I was able to put Angular into an Infinite Compilation Loop (yes!) which was being caused by inserting a new element before the directive element inside of the compile function. If however you insert the new element after the directive element, then Angular is happy with it and it works fine.
I have a directive and inside it's template is a <img> element and I want to execute a custom method that is within my directives scope:
<my-directive>
<!-- my directives template -->
<p>...</p>
<img onload="myScopeMethod()">
<p>...</p>
<!-- my directives template -->
</my-directive>
I found this Get width height of remote image from url but this works only if im applying it to a directive that works on the <img> element.
The directives purpose is to show a widget that allows me to manipulate the image (scale it by dragging a slider) but I somehow need to get it's original size.
How can I get it to execute the method from my controllers scope?
You would generally want to take your load handler function out of the template itself and stick it in the link function. From there it kind of depends on your directive and whether you are using an isolate scope, inherited scope, or the same scope as the parent.
If you have a scope key in your directive definition object and it's set to an object literal, then you are using the isolate scope. In that case, you'll need to pass it in somehow, and the most straightforward way is to use the '&' option.
If you don't have a scope key or have a scope key and it's set to a boolean value you're using the same scope or an inherited scope. In this case, all you need to do is call $scope.originalScopeMethod() and it will either call it on the scope or find it in the prototype chain.
Here's an example with the three different scenarios. The table at the bottom is being fed from the 'main' controller scope while the small numbers are fed from the directive scope.
If it were me I'd probably go with either isolate or inherited scope so you can keep track of multiple images separately a little easier. The shared scope version in my example would only work for a single image, but you could make it work with an array or hash if you really wanted.
Let me know if I misunderstood your question in any way.
I'm trying to build a context menu directive with some specific characteristics (that are not directly relevant to this question). I've attempted to implement this as an "attachment" directive that attaches the scope of the element it's set on, to a pre-made "menu" element. Since I was unable to find any canonical documentation on this topic, I've based my implementation on some digging around with the Chrome Developer Tools.
I have made a simplified testcase that shows my implementation (and the problem) here: http://plnkr.co/edit/URafJe0OcRsMsmaEdmDi?p=preview
It effectively uses $new on the element's scope to create a new inheriting child scope, and then attempts to attach that scope to the 'menu' element (referenced by ID), by setting its $scope data property, and setting the ng-scope class.
The problem I am encountering, is that the menu element still does not seem to be able to access the attached scope. Any expression relating to that scope, comes up empty (again, see the Plunker above). The $scope data property is correctly set to the newly created inheriting child scope, and that scope is correctly inheriting so that the parent scope values should be accessible. I have also verified that it is interpreting any bindings at all by adding a simple "1 + 1" expression - this works fine.
Why can I not access the scope that is supposedly attached to the element, and/or what is the correct way to manually attach a scope to an element in a directive?
Here is a fork of your plunkr: http://plnkr.co/edit/V0dbM4NFcxdT8YEXWs4l?p=preview
I dont know how to do what you want without using $compile. I did something like this in the plunkr:
menu_element = $compile(menu_element)(child_scope);
I'm trying to create a custom AngularJS repeat directive, because ngRepeat doesn't fit my needs in this particular case, where I'm creating a sort of templating language based on angular directives, and I can't afford to freely create DOM elements.
In particular, these are the problems I have with ngRepeat and I'm trying to solve:
I need the repeater element to be the parent of the elements being repeated
the repeated elements have different templates, and I can't use wrapper elements or ngSwitches to provide different markup
I have created a custom directive that should:
empty the repeater DOM element
watch the current scope and at each call loop through an array, create a new DOM element per iteration, and compile the element with a childscope
keep the whole thing bind to the model
The problem with this approach is that I'm creating an infinite loop (I get the 10 $digest error) because I'm modifying the scope (creating the child scope) at each scope $watch fn call.
How can I approach this problem ? I tried looking at the ngRepeat source but that's pretty difficult to understand for me...
Sidequestion: A minor (for now) problem would be the performance of re-rendering the whole thing each time the scope is modified... How difficult would be to implement different actions for array's adding, removal and update of items ?