Here is my plnkr http://plnkr.co/edit/U5WiZzhX31ifux33enYh
I'm writing a in-place editor directive. It works as expected first time but subsequent times Save or Cancel buttons does not work. Why is that?
In plnkr when I click Save or Cancel 2nd time, it does nothing but in my local dev environment it reloads page.
I'm angular newbie, appreciate your help. Thanks!
If you remove the editor element from the DOM you will have to recompile the template before adding it again, or otherwise you will loose access to the scope.
Change your show function to something like this:
function show(){
editor = $compile(template)(scope);
element.after(editor);
element.hide();
}
Related
I am a bit of a beginner, but I would like to ask a general question. AngularJS does a watch on binded variables. My question is, when I navigate and a new html template is loaded, are the old watched values removed, or do they stay in the loop?
Hello $watch is bound to a controller ,which in turn shows the data to an HTML template.
So, If you navigate to another state or url and another controller loads , then the previous controller with all the data and the $watch will be unloaded, but new ones($watch) will load from the new loaded controller(if there are any).
$watch are never removed by itself, they have to be removed manually.
You should go through $watch lifecycle : $watch life cycle
No, the $watch list is updated as per the html which is being rendered by the browser.If you change template inside the page, the browser will have to render the new expression.
I think this youtube video would help you in getting
I am new to using plnkr. I have created my first plnkr and facing an issue in setting the $scope.currentPage variable. All other variables are working fine except the currentPage. I am using the angular-utils-pagination directive.
Once I click on the page number the variable is getting printed but when the page gets loaded for the first time the variable is not initialized.
Please let me know where I am going wrong. The link for the plnkr - Link
The problem is that you are injecting $scope into your MyApp directive. There's no need to do this since directives have access to their parent scope by default. So it should look like this:
angular.module('myApp').directive('myTable', function ()
Maybe I'm just not thinking straight. Can I enable/disable a link via my controller using some form of angular ng-click and ng-disabled?
Fiddle here
see fiddle...
The 'Do stuff to things' button should not be enabled unless at least one 'thing' is checked, and no action should be taken either. Of course, once a Thing IS checked, the button should activate.
The more I try to fix this, the more complicated it gets, and I can't help but think I'm overlooking something obvious.
Because ng-disabled for INPUT's.
Use ng-class here is an example in fiddle
<a ng-class="{'disabled': things.length==0}" ng-click="doStuff()">Do stuff to Thing(s)</a>
$scope.doStuff = function(){
if($scope.things.length==0) return;
console.log('Stuff has been done to things');
}
First of all, you need to remove the curly around your test if you want to do something with ng-disabled. Generally, you dont need to use them with the native angular directive (except for ng-href..)
Afterward, the ng-disabled dont prevent the ng-click if it's not on a button, so you need to use a button or use a syntaxe like this in your ng-click:
ng-click="condition && doSomething()"
Here is a working example, hope it will help you
http://jsfiddle.net/dxquye40/8/
Check out ryeballer's answer in this post: Angular JS + Button should be enabled if at least one checkbox is checked how To do it?
The plunker ryeballer provided should be modified by flipping the condition in the ng-disabled directive:
ng-disabled="!isChecked()"
Here's an adjusted plunker:
http://plnkr.co/edit/N0az5UeVH0VRlGK1ZwvC?p=preview
This seems very similar to what you want to do.
Keep in mind also that the ng-disabled directive doesn't seem to affect anchor tags. So, if you can, use something else (such as a button element ).
Also, note how your initial solution does not take advantage of Angulars data-binding. Rather than setting ng-click events on your checkboxes, just tell Angular what this data is via the ng-model directive. Let Angular take care of the stuff you've got in your setThing() method.
If you're allowed to use jQuery then you can use .removeClass(), as I did here with your script.
http://jsfiddle.net/kirdua/dxquye40/21/
code
Using the AngularJS UI Directives for bootstrap, is there any way to collapse the tab content using the tag?
I have several tabs/pills with content, which will start collapsed (hidden). When any of the tabs is activated, the tab content should collapse open, and stay open until a close button is clicked, which will close the collapsable section.
In the controller, I set $scope.isCollapsed to true. Each of the tabs have the ng-click which calls openCollapse(), which sets isCollapsed to false. If I add the collapse="isCollapsed" directive right to the tag, then the tabs disappear too, not just the content.
How can I fix this?
It took some figuring out, but it is possible!
The main problem I had was with scoping issues and transclusion. I hadn't run into transclusion yet (I'm fairly new to Angular), so I'm still wrapping my head around it a bit.
I tried a few different ways, and a couple others might have worked, if I understood transclusion a bit better, but in the end, this was the simplest for me, and I got it working.
So basically I had to do 4 main things to get this working.
Open up ui.bootstrap-tpls-0.11.0.js (or whichever version # you're using). Do a search for angular.module("template/tabs/tabset.html". In the <div class=\"tab-content\">\n" tag, add collapse=\"isCollapsed\".
The tag (and everything in it) gets replaced when compiled, and this is the code that it is replaced with, so this way we can directly put the collapse directive where we need to.
Also in ui.bootstrap-tpls-0.11.0.js, do a search for .directive('tabset'. Inside the link: function(scope, element, attrs) {, add: scope.isCollapsed = scope.$parent.isCollapsed'
Here we're linking the transcluded scope's isCollapsed to the isCollapsed that is being set in your initial controller (you could also just put initialize isCollapsed in the controller in the next step, instead of just linking it, but I'd already initialized it in my controller and I'd linked it trying to do another method)
Still in ui.bootstrap-tpls-0.11.0.js, do a search for .controller('TabsetController'. Inside this controller, add:
$scope.$on('openCol', function(event){
$scope.isCollapsed = false;
});
$scope.$on('closeCol', function(event){
$scope.isCollapsed = true;
});
What we're doing here is adding event listeners inside the tabset's transcluded scope. What we're going to do at the end, is create an event broadcast. I also added a .$watch(), just so I could see if it was changing:
$scope.$watch('isCollapsed', function(){
console.log("isCollapsed has changed, it is now: " + $scope.isCollapsed);
});
Lastly, in the view's controller (or whichever controller contains the .openCollapse() and .closeCollapse()), change your functions from editing this scopes isCollapsed, to:
$scope.openCollapse = function(){
$rootScope.$broadcast("openCol");
}
$scope.closeCollapse = function($event){
$rootScope.$broadcast("closeCol");
}
This will broadcast the events that are being listened for in the TabsetController. So now the proper scope of the isCollapsed is being changed, and is reflected in the code. Now watch that lovely tab-content collapsing.
Please let me know if I haven't got my terminology quite right, or if there's something inherently wrong with the way I'm doing it. Or, simply, if there are other ways. Always open to suggestions :)
I have two custom directives define in my project:
<include-partial> - element directive which gets template via $http service, compiles it and inserts into DOM
on-show="someFn()" - attribute directive, which should call some function when the element becomes visible
I'd like to combine the two, so that I could write code like this:
<include-partial on-show="init()">
This, however won't work, as the content of <include-partial> is fetched asynchronously, so on-show has no DOM to attach to.
Do you have any ideas how to tackle this? How could I force on-show to wait until the <include-partial> is done compiling the DOM?
Thx in advance!
In your case "on-show" is never trigger because "include-aprtial" tag don't changes it's visibility. Try to hide "include-partial" in link function and show on content load.