In jQuery, you can create reusable UI components. In AngularJS, I understand that using Directives is the equivalent way of doing this. The Directive syntax includes a Link property where you can manipulate the DOM. But this is where I get confused. AngularJS is meant to avoid manipulating the DOM because AngularJS manipulates the DOM internally, so why would you do this? Is there a better way of doing this without actually having to manipulate the DOM?
Where did you get the idea that all DOM manipulation is a bad thing? How would anything ever get rendered if the DOM wasn't being manipulated? It's a bad idea to mess with the DOM in controllers or outside of Angular's context but in directives you're plugging into Angular and can safely make DOM changes without breaking anything.
You're basically asking how to manipulate the DOM without manipulating the DOM which makes no sense.
Go ahead and do your stuff in the link-function, it's perfectly fine.
At some point you will have to engage in manipulating the DOM in some way or another, but for 95% of all cases you can stick to angular's built in directives, such as ng-if, ng-hide/show, ng-switch, ng-repeat etc...
But these are all directives, so angular isn't manipulating the DOM "internally", it does it through directives, just as it's meant to do...
And keep in mind that in your directive templates, you can use those other directives, so your directive can focus on it's own task.
Use the $new(isolate) method from the $rootScope to create reuseable UI components. Set isolate to true. Don't manipulate anything outside of your UI component:
If true, then the scope does not prototypically inherit from the
parent scope. The scope is isolated, as it can not see parent scope
properties. When creating widgets, it is useful for the widget to not
accidentally read parent state.
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Related
What is the difference between $scope.$parent and $broadcast?
Everything is different. They're not related at all. Two completely different things - not even the same JavaScript type.
$scope.$parent is a reference to the parent scope object, while $broadcast is a function to broadcast an event.
Basically im writing a common layout.
Inside common layout developer will write his code using ui-view.The common layout will have button events when fired it should change the state of ui-view which is nested.
For this if i use components i think i cant achieve because
Top-framwrok(buttons,titles e.t.c)
Body-developer-this part is an ui-view
Bottom-framwork(border ending and some styles)
So for framwork i will have controller
So when firing any change in framework should trigger developer template also.
I'm working with angular js and there's one thing I didn't fully understand yet. I know what directives are: they are "additional features" that we add to HTML that can be used as elements, attributes, comments or classes and that can change completely the markup there by some other thing rendered by angular or can add functionality with the link function.
That's fine, but when to use directives? I know that if we want to represent on screen some domain specific object then this is one possible candidate for a directive, or when we want to add functionality to some HTML element (like slider functionality to an input) then we use a directive. But what about other cases? What about when we want to manipulate the DOM to, for instance, activate the functionality of a sidebar or thing like that? Directives are used for this to?
How do when know when to use a directive in angular?
I think about directives when I face one of this two scenarios:
Custom control: I need to implement a custom control, that probably I will reuse in other parts of my app or even other projects.
Custom Validations: AngularJS provides a limited set of validations (e.g. ngRequired, RegEx...), but for sure you will need to implement your custom logic validations. I prefer to implement that validations in directives (reuse, SRP, easy to be tested isolated) rather to overload the controller with that logic.
Some directive rules of thumbs:
If you plan on adding the same markup-based functionality more than once, create a directive (but if it's simple enough, just use ng-include).
If you need to modify the way an ng-modeled input field validates, formats, or parses, create a directive that requires ngModel.
If you want to make writing unit tests easier for a specific piece of markup, write a directive.
If you come from a jQuery background and instinctively feel like using $('.jquery-style-selectors') from your controller, instead write a group of directives where the child directive(s) require the parent directive(s) and communicate via the directive controller(s).
I'm in need of some pointers in my landingPage-builder project. (i'm currently stuck!).
The main issue is as follows:
Each element in the template (like the h1 and the paragraph) has attached a directive. What I need to get the directive to do is: create a template of HTML with some other directives attached like ng-click, ng-options etc, keep the bindings to the model intact (currently far away from working), update the model when changed.
I'm not trying to append to, or replace the element the directive is on, but make a html-template and inserting it into the DOM (almost like another view) so that the model on the left can be updated from the "settings" box on the right.
The project can be viewed here: http://193.107.29.196/~stian123/landingPageV3/app/#/pagebuilder/2
You may need Allow-Control-Allow-Origin for Chrome: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related
I'm a bit confused about $compile and doesn't really know when I need to use this part of the directives api.
Any suggestions?
Thank you!
If I understood your question correctly, you want to dynamically create templates, some of which have Angular attributes in them, then attach them to the DOM.
First, to (hopefully) answer your question, about when to call $compile:
Whenever you load in HTML from outside Angular's template system (like trying to set $(element).html(myHtmlString)), you need to let Angular compile it before you attach it to the DOM. In other words:
elem.append($compile(yourHTMLString)(scope));
This lets Angular traverse the DOM and parse any directives and bindings and attach them to the provided scope. If you don't $compile, Angular has no idea about those intended bindings at all, the HTML is never read by Angular.
Second, I don't know how flexible you want your templates to be, but if they're relatively fixed, but with some fixed customizable options (text, color, font-size etc), you might be better off creating a directive for each 'view', with the view options bound to the scope of the directive. Then you can just change the fields on the scope of the directive in the panel on the right side, and the view will update directly. You wouldn't even have to use $compile in this case.
If you want the user to be able to manually add the template HTML code, you will have to compile the HTML as described above.
Accompanying plunker.
I have an attribute-level custom directive in a div. The directive has an isolated scope. Inside my div I have other directives that expect to be in the scope of the parent.
The issue is that the directives inside my div have access only to the isolated scope, not to the parent scope. I understand why, but I'm not clear on how to solve it cleanly.
I know that I can use transclude to solve this (see plunker) but this feels very sloppy. I have no need for a template, but I'd have to create one just for transclude to work, and transclude seems to be the only way to ensure that my nested directives have access to the correct scope.
Is there an alternative, cleaner way to do this?
To head off some possible questions:
I'm using an attribute-level directive instead of an element-level to make things easier for IE
I'm using an isolated scope because it's a best practice - I don't want to hose my parent scope by accident, and I want the directive to be portable.
I'm really not sure what you're trying to do.
But what you're actually doing is leveraging bidirectional binds on an isolated scope for ill-effect. It almost seems unrelated to your question.
Anyhow... here is an update to your plunker
Basically what was happening is inside of your isolated directive you need to use whatever name you've assigned in your scope declaration, in this case toggleOn().
however if you want to you can do this. Basically just call $parent.colorToggle().
You can decide if this is "less sloppy" than transcluding:
<button ng-click="$parent.colorToggle()">Inside</button>
Isolate scopes have access to the parent scope via a $parent property. Although an isolate scope does not prototypically inherit from its parent scope, Angular still maintains a hierarchy via $parent and $$childHead and $$childTail.
I'm trying to build web app that dynamically load interfaces, using angularJS.
I found that it was possible to bootstrap some portions of my code after the initial bootstrap of Angular (HTML template + Controller).
My problem is that, doing so, the 2-way data-binding doesn't work. See for yourself:
http://plnkr.co/edit/MtAWP6
Any idea? Am I seeking for something to do the wrong way?
Thanks!
Your problem isn't a bootstraping one (although you really shouldn't be using bootstrap to instantiate a controller, but rather $compile, imo - see this answer). It is a scope problem. You define a "mymodel" model in your controller, but then define it again in your form, for which angular automatically creates it's own scope. While the form's scope inherits from the parent scope, and thus seems to be "binding" the model, the inverse doesn't happen.
You need to either establish a binding between both scopes (or $watch the form's variable, or define the for in the surronding controller), or just assign the controller you want to the form, directly.
See your problem exposed here (see that while your $timeout changes both models, manually setting the model only changes one)
See it resolved here (by basically assigning your controller to the generated form, rather than to a enclosing div of said form)
I think maybe you should take another look at routing/ deep linking. You should be able to specify both a template url and a controller.
Check out this video
And the api docs