I'm creating a font picker directive with angularjs for an Umbraco property editor.
In the directive I have a select with the fonts, which is bound to the isolated scope.
If I have two directives on the same page, and I change the selected font in one of them, the other one changes too.
How come? and how do i fix it?
hmmm...figured it out
when i initialized my scope i used the same json string on both variables that was used for binding the directives. Apparently the two scope variables were the same...
not my proudest day...
Related
Is there a way to tell Angular to not compile contents of certain elements?
Use case:
Angular CMS contains textarea elements that have CKEditor attached. The CKEditor is using the divarea plugin instead of the default iframe plugin. The textareas contain HTML templates. These templates are exported on demand and fed to a Angular webapp.
The templates are simple enough: plain text, ordered lists, the occasional predefined class attribute applied on the plain text; but the plain text can contain placeholders for the Angular webapp to interpolate. I do not want to let the Angular in the CMS interpolate these at all.
Currently my problem is that the Angular in the CMS interpolates these placeholders and, since they don't refer to anything, removes them. I would rather not just change the delimiters to '{[', ']}', as while this might fix this in the short term, the chance of directive and text copy collision increases as the project goes on, and I'd like to avoid it.
Is there any directive or other way to tell Angular to keep away from the content of specially marked elements?
Use ng-non-bindable directive on the element:
The ngNonBindable directive tells Angular not to compile or bind the
contents of the current DOM element. This is useful if the element
contains what appears to be Angular directives and bindings but which
should be ignored by Angular.
Or use your own directive with terminal: true property to match the layout better, because it is the only thing that ng-non-bindable directive does.
I am using UI Bootstrap's typeahead directive, and added my own popup template via typeahead-popup-template-url. In that template, I'd like to access scope variables from the parent template (i.e. the one in which I've used the typeahead directive). Is this possible?
Here's a (broken) example of what I'm trying to do ("hello" should be present in the dropdown): http://plnkr.co/edit/ITT1SdRfUWeeN6n3aMqu?p=preview
I'd like to do this WITHOUT modifying the typeahead directive. I don't want to muck around in third party (uib) code if there's a more elegant solution.
In your template, you need to reference the $parent scope. Change:
This should say "hello": {{hello}}</h1>
To:
This should say "hello": {{$parent.hello}}</h1>
Bootstrap, jquery ui, kendoui, yui etc
Isn't that a bit much of frameworks together O.o
Anyway this post might help: How to access parent scope from within a custom directive *with own scope* in AngularJS?
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.
Is ng-model allowed inside element of a table? Will angular automatically update the model if I change a particular column(i.e. view)?
If you are making the table cells directly editable using the HTML contenteditable attribute, ng-model won't work automatically as by default it's only for form elements.
It is possible to make it work with contenteditable though. There is an working example of how to do it on the angular website at http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
ng-model is allowed wherever typical form elements exist that can use the directive (input, select and textarea)
One thing I will say about ng-model that can make it a bit tricky is that you will want to bind ng-model to a property of an object rather than just a simple scope variable. I have run into several instances where I bind $scope.foo to ng-model and use it in an input control. Then, if you clear the input field, the binding is lost and it stops updating the variable. Use something like $scope.fooObj.modelProp where fooObj is an object and it will work fine.
I'm running into an issue with two way binding in angular on a custom directive. I have a directive that will have a editor mode (and have different types of inputs) and display mode.
unfortunately, it seems that if there is a ng-switch the two-way binding breaks from the control. But the variables remain linked if I access it from an external component. Here is a very cutdown example plunker to show the problem.
http://plnkr.co/edit/M8gPfRlrVIXHdXREN1ai
If you modify the top input the changes propogate to the bottom input. But if you modify the bottom input the binding breaks.
How can I resolve this issue so that the changes to ng-model in the directive propagate to the controllers scope?
You are facing this problem because Ng-Switch creates its own scope
So there are two solutions to this problem
1) Use two dots in model
http://plnkr.co/edit/E7cE37VfrqatiMX885ZZ?p=preview
2) Use $parent in the model
http://plnkr.co/edit/eaFYF5kgOnkhsGpdgzFA?p=preview