ng-click stops working when using a kendo grid - angularjs

I am trying to get a ng-click event to fire correctly when integrating the Angular Kendo UI.
The following Plunker shows a working example, click the button click me and a modal window appears, however if I add the kendo-grid attribute to line 18 of index.html then the pop up does not work. e.g. changing:-
<table>
to:
<table kendo-grid>
Then the modal popup does not work. I suspect that when the grid is rendered then angular loses the binding. Not sure how to fix it. Can anyone help?

The problem is the angularjs-kendo labs master file does not support command binding and a couple of issues have been raised.
Basically you need to take the javascript from the compile-kendo-grid-rows
See working plunker.

Related

Bootstrap Toggle checkbox not working every time

I have a bootstrap toggle checkbox from http://www.bootstraptoggle.com/ in a partialview (bootstrap modal window). Inside the partial view, I have reference to the js file (from https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js).
The bootstrap check/uncheck seem to work alternatively. For example, if I open the popup for the first time it works, second time doesn't work, third time works etc.
Is this a known issue and a workaround exists? Can someone please guide? Thanks!

tinyMCE in an angularjs modal dialog only works on the first popup

There is a modal box that is opened from the page multiple times. The tinyMCE control is initiated on the first popup but on subsequent popups, the textarea is not transformed.
I tried using a timer as suggested here stackoverflow/17825282 but got the same result.
Code on Plunker
From docs: https://github.com/angular-ui/ui-tinymce
Be sure not to set an id attribute.)
So just remove id:
<textarea ui-tinymce="" ng-model="tinymceModel">{{SectionTemplate.Preface}}</textarea>
http://plnkr.co/edit/Mv2fLWuKiVjEIy77XNF0?p=preview

Angular + Bootstrap Accordion, Browser Back button action and opening the corresponding item

I have implemented Bootstrap accordion(3.*.*) using Angular JS (1.2.*). Here I have used ui-router to load template when click each item in accordion. its working fine.
But I am getting the following error whenever click any item
Error: [$compile:nonassign] Expression '$state.includes('customers')' used with directive 'accordionGroup' is non-assignable!
I am getting the error in the below line. I have checked the following condition for opening the corresponding item whenever user click browser back button. How can i fix this?
is-open="$state.includes('customers')"
Also, I have checked the above condition in each item for 2 times. one for is-open. Another one for changing glyphicon in the right corner of each item. How can i reduce the code for this lengthy checking?
I want to fix the above issue inside view itself. I don't want to fix this from controller.
Here is a fiddle
I have fixed this issue by assigning the active class in separate variable using ng-init
Working demo
ng-init="customersAccordionActive=$state.includes('customers');"
is-open="customersAccordionActive"

Kendo UI button swith angular

I have the following example.
Two kendo UI buttons and two regular buttons. Both should enable/disable the button on bottom. Only the regular buttons do and I don't understand why. Probably has something to do with the scope...
EDIT:
From another example I have, it seems like the scope is updated correctly but the ui is not updated. In my example i have another control that when I click it the ui is suddenly being updated.
Found the answer:
When clicking the kendo button the scope does change but it doesn't go through angular so angular doesn't know that the scope was changed so the digest cycle doesn't run.
So adding $scope.$apply(); at the end of the function triggers the digest.
Took the explanation from here.

Open a bootstrap modal with a directive in angular 1.2

I'm using angular-ui bootstrap to show modal windows. I'd like to turn this into a directive that would let me pull content from the server and display it in a modal or popover…
For example: <a a-infobox="modal" href="#/content/one">A link</a> should get the content from the href and pull it into a modal window.
I pulled together a plunkr: http://plnkr.co/edit/cwtTHjMsW0knlsq2NNtg?p=preview. The first link has the a-infobox attribute. When I click on it no dialog shows up. In the console you can see that it was called.
When I click on the second link which is called from a controller, it opens the second dialog. Then when I click the button on that modal, it disappears and the dialog from the first click is right behind it.
I'm just starting to dig into directives and am sure I'm missing something fundamental.
Thanks in advance.
I found a solution...it appears that the modal needs to be applied so angular will process it on the next digest.
A simple line: scope.$apply($rootScope.dlg); is all it took.
The plunker was updated accordingly.

Resources