I m trying to use Kendo grid in my angular js app. I m creating a directive so I can use it in different tables among the application. Once the ng-repeat renders the dom I want to call:
element.kendogrid().
Since there is no post-render callback for ng-repeat, some people suggest using two directives:
1-
angular.module('app')
.directive('rowDirective', function () {
return function(scope, element){
if (scope.$last){
scope.$emit('LastElementMessage');
}
};
});
2-
angular.module('app')
.directive('tableDirective', function () {
return function(scope, element){
scope.$on('LastElementMessage', function(event){
$(element).kendoGrid({
scrollable: true,
sortable: true,
});
});
}
});
This approach works fine and everything is executed in the order it should. The ng-repeat works fine by it self, which means it renders the items in the right order but when I use the kendo-grid, it renders this: {{customer.CustomerID}} inside the grid. Has anyone gone through something like this ?
Well, perhaps you should take a look at Angular Kendo UI project at http://kendo-labs.github.io/angular-kendo/ - it does rather good job of "marrying" Kendo UI with AngularJS.
See http://demos.telerik.com/kendo-ui/grid/angular.
There are specific custom directives that enable kendo ui to play nicely with angular js. E.G. k-data-source, k-columns, k-selectable, k-pageable. These should be included in the latest version of kendo ui. Just make sure to include "kendo.directives" as a dependency on your top level-module :
var MyModule = angular.module('MyModule', ["ngRoute", "kendo.directives"]);
Related
I have included the bootstrap ui module in my angular project and now I want to extend for example the datepicker controller 'UibDatepickerController' in the 'ui-bootstrap-tpls.js' with further functions.
Okay, I could edit the ui bootstrap file, but that is not that what I want.
I want a modularized file (maybe an own directive) so that there are no big problems when a ui bootstrap update is incoming.
Is that possible? What is best practice?
You can try injecting $controller and extending like this:
app.directive('myUiDirective', function ($controller) {
return {
link: function (scope, iElem, iAttr) {
angular.extend(this, $controller('UibDatepickerController', {$scope: scope}));
}
});
However I am not sure if you will be able to get controller from different module (in this case, from ui.bootstrap).
I have a custom directive I have created that loads a template into a modal window. The modal window is a template itself and is able to run my custom directive without issues. That template that is loaded into the modal contains another directive which creates a select list using angular-selectize. Here is my directive:
var dynamicTemplate = function($templateRequest, $compile) {
return {
restrict: "E",
link: function(scope, element, attrs) {
var modalOptions = JSON.parse(attrs.modalOptions);
$templateRequest(modalOptions.Url).then(function(html) {
$elem = $compile(html)(scope);
element.append($elem);
});
}
}
}
The HTML is getting loaded correctly, but the selectize directive is not initializing .
I have also tired this inside the then method:
element.html(html)
$compile(element.contents())(scope);
That gave me the same result.
The issue I am having is I am receiving this message after the compilation of the HTML:
TypeError: element.selectize is not a function
Here is the plunk I am working with.
If you want angular.element to use jQuery you have to include jQuery in page before angular loads.
Demo works fine once you change script order
Updated demo
First solution
You have to include jQuery.js before Angular.js in index.html. This magic makes angular.element to use jQuery.
Solution 1
Second solution
You may replace element.selectize with $(element).selectize in angular-selectize.js on line 97. This makes angular-selectize script to use jQuery's selector instead of angular's.
Solution 2
Include jQuery in the page before Angular loads. Then angular.element will use jQuery.
I have built a multi step form following this tutorial: http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router Everything is working well.
I now want to use Twitter's typeahead.js on those forms. So I need to make the typeahead call on the input being loaded with angular-ui-router.
I noticed angular-ui-router provides a onEnter callback that gets called when the state becomes active. Making the call to the typeahead function from in there doesn't seem to work, it seems the call is made before the view is loaded (not 100% sure of that).
How can I initialize typeahead on my input field loaded with angular-ui-router?
What I tried:
.state('questionnaire.relationship', {
url: '/relationship',
templateUrl: 'questionnaire/relationship.html',
onEnter: function(){
var relationshipList = ['brother', 'sister', 'father', 'mother'];
var relationships = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: $.map(relationshipList, function(relationship) { return { name: relationship }; })
});
relationships.initialize();
$('#bloodhound .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'relationships',
displayKey: 'name',## Heading ##
source: relationships.ttAdapter()
});
alert('finished');
}
})
When entering the questionnaire.relationship state, I see the alert popup before the view. Then the view with my input loads properly, but typeahead isn't working. There are no js error in the console.
I also made sure the typeahead call is working when used outside of angular-ui-router.
Have you tried using angular ui bootstrap's typeahead? It was built for angular without the dependency on JQuery
http://angular-ui.github.io/bootstrap/
I have an AngularJS application, which hasn't been using the built in routing before now. I am refactoring the site, so it will be a SPA.
To do this I have change the app to use ng-view to switch between the different pages, instead of just having the server serve the different controllers
After this is done my endless scroll suddenly stopped working.
I have a directive which looks like this:
directiveModule.directive('whenScrolled', ['$window', function($window) {
return function(scope, element, attr) {
var raw = element[0];
angular.element($window).bind('scroll', function() {
console.log('test');
scope.$apply(attr.whenScrolled);
});
};
}]);
But now the scroll event is never fired.
If I take angular.element($window).bind('scroll', function() {..}); out and uses it in the controller instead it works fine, but it just seems like a hack.
Is there any way to bind to the page scroll event inside a directive, which is inside a controller, which is inside a ng-view?
Are you sure the element with the directive which is inside the controller and then the ng-view is added to the DOM?
More code (A Fiddle) would help.
I have an app in AngularJS and in one of my view I want to implement some JQuery animation..nothing too fancy..just hide/slide of a divs ..those divs are created from ng-reapet loop and I need access to DOM elements in order to write my JQuery . Where shall I put my code controller or directive ? An exemple of my code:
$(document).ready(function(){
$(".motivation").hide();
$(".show_hide").show();
});
$(document).on("click", ".more", function(){
$(this).parent().next().slideToggle();
return false;
});
With the beta version of AngularJS, you can use ng-animate.
documentation
nganimate.org