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
Related
Hello Angular experts,
I have to preload a certain dataset (factory call to the database) to the controller. I don't use angular views so stateProvider or routeProvider cannot be used to resolve. Basically I need the dataset readily available before loading the controller.
Is there a way to achieve this?
I have a controller and a view. The view also has a widget. The widget has an attribute that expects a dataset. By the time the controller is done fetching data the view is already rendered so the widget input parameters are empty. So I need the widget dataset to be filled much before getting to the controller. By the way the app.run solution doesn't work as there is a promise involved.
You can't say as before loading controller, i correct it with before binding controller
angularjs has app.run and i think you know it, it work just when application run (first time) and every time you refresh it.
var app = angular.module("app", []);
app.run(function($http, $rootScope) {
$http.get("url").then(function(response){
console.log(response.data)
$rootScope.data = response.data; // as global scope
})
})
app.controller('ctrl', function($scope) {
$scope.$watch('data', function(newValue, oldValue) {
if(newValue){
console.log(newValue) // you will get `rootscope.data` when it's ready
}
})
})
You can add factory to the app run too.
please fill free to ask question.
Based on your comment, what you are trying to do shouldn't require any changes to the Controller.
What you are actually trying to do is delay rendering of the widget component until you have data that the widget needs. This is commonly handled by ng-if in your HTML.
For Example (pseudocode):
<div ng-if="myData">
<Widget input="myData"></Widget>
</div>
Angular will not render this div until myData has a value, and all your Controller has to do is make sure myData is added to $scope.
I have an angluar module.
In that module I have a controller with a function.
I need to execute that function in popup on href click.
As the popup content is not initially part of DOM or angular context, how can make a angular function to be executed by that generated code?
Here is what I try to code: codepen
app.controller('AppCtrl', ['$scope', 'myPopup', function($scope, myPopup) {
...
var infoWindow = new google.maps.InfoWindow({
content: "<a href='#' onclick='myPopup.show();'>this is my link</a>"
});
To retain is that I don't try to make execute exactly this code, I just search a way to execute an angular service function from a generated "on-fly" html code (a dynamic popup content, in my case).
First of all here's the working codepen: http://codepen.io/anon/pen/vKRWYy?editors=1010
So, the solution(just A solution. Not THE solution) is to add modal open function on window or global scope. And invoke that function on clicking the map.
window.showPopup = function(){
myPopup.show();
};
<a href='#' onclick='showPopup();return false;'>this is my link</a>
On a side note, it's generally not good practice to use non angular code with angular. It might be worth looking at an angular google maps implementation like: http://angular-ui.github.io/angular-google-maps/#!/. Maybe?
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 a tabbed navigtion in my webapp that looks like this
Now I want to Change the directive each time the user clicks on one of the Navigation points. My Idea was to init the page with the first template.
$scope.currentDirective = $compile('<div order-Sale></div>');
Then when the user clicks on a tab, I wanted to change and compile the content again with a new directive in it. But for some reason this is not working. How would you proceed in order to archive this dynamic content loading? I really want to only load the content on necessary need and not just to show or hide it. I think using directives is the right way to go for it, but I'm a but stuck at the implementation... Someone any pointer ? (I don't want to use any jQuery)
What I tried [Edit]:
The controller.js
app.controller('pageController',['$scope','$compile', function($scope, $compile){
var templates = ['<div first-template></div>','<div second-template></div>'];
$scope.currentTemplate = $compile(templates[0]);
$scope.changeTemplate = function(id) {
$scope.currentTemplate = $compile(templates[id]);
};
}]);
The HTML
<div ng-controller="pageController">
<li>
<a ng-click="changeTemplate('1')">Change Template</a>
</li>
{{currentTemplate}}
</div>
UPDATE
$compile returns a linking function not a value, you cannot just bind it to your template with interpolation.
You should use ngBindHtml instead of regular bindings ( ngBind & {{ }} ).
ngBindHtml does compiling, linking and watching all out-of-the-box.
With ng-bind-html-unsafe removed, how do I inject HTML?
Here is a plunker
app.controller('pageController',['$scope','$compile','$sce', function($scope, $compile, $sce){
var templates = ['<div>first-template</div>','<div>second-template</div>'];
$scope.currentTemplate = $sce.trustAsHtml(templates[0]);
$scope.changeTemplate = function(id) {
$scope.currentTemplate = $sce.trustAsHtml(templates[id]);
};
}]);
The markup:
<div ng-controller="pageController">
<button ng-click="changeTemplate('1')">Change Template</button>
<div ng-bind-html="currentTemplate"></div>
</div>
For more robust dynamic content loading you have two good alternatives:
ngRoute from angular team.
ui-router from angular-ui team.
If you want to change and compile the content again, well that's exactly what ng-view/ ui-view directives already do for you.
Why not just use a directive:
You probably need to load a different template (html partial) for each tab.
You probably need to change the url based on the tab (and vice versa)
You probably need to instantiate a different controller for each tab.
ngRoute and ui-router come with their own directives.
You can implement your own route module if you want but that's more than just a directive.
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"]);