I'am using fullcalender and need to change some navigation buttons with AngularJS. I do not have much experience with AngularJS so the JS Code would be somthing like this:
var filter = $(".fc-filter-button");
filter.html("<i class='fas fa-filter'></i>");
filter.attr("id", "dropdownFilterButton");
But how can i archive this and some other usual JS/JQuery Tasks with AngularJS. I know i can use JQuery too but want to do it in the right Angular way.
I tried something like this:
element[0].getElementsByClassName('fc-filter-button').html("<i class='fas fa-filter'></i>")
or
var queryResult = element[0].querySelector('.fc-filter-button');
angular.element(queryResult).html("<i class='fas fa-filter'></i>")
How can i make these changes without touching the fullcalender code itself.
Take a look at the NgSanitize module "The ngSanitize module provides functionality to sanitize HTML".
Here's an basic example which should get you going in the right direction
angular.module('app', ["ngSanitize"])
.controller('myCtrl',function($scope){
$scope.content = "<p>The initial html</p>";
$scope.changeHtml = function(){
$scope.content = "<h3>The changed html</h3>";
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular-sanitize.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<button ng-click="changeHtml()">Change html</button>
<div ng-bind-html="content">
</div>
</div>
Related
I'm still fighting with simple things in Angular. I have jQuery and Backbonejs background, so please do not yell on me. I try hard to understand differences
I have HTML in which from rails is given ID of project as data-project-id:
<div data-ng-controller="ProjectCtrl as ctrl" data-project-id="1" id="project_configuration">
Is there any chance to get access to this attribute? I need it to my API calls...
To access an elements attributes from a controller, inject $attrs into your controller function:
HTML
<div test="hello world" ng-controller="ctrl">
</div>
Script
app.controller('ctrl', function($attrs) {
alert($attrs.test); // alerts 'hello world'
});
In your example, if you want to get data-project-id:
$attrs.projectId
Or if you want to get id:
$attrs.id
Demo:
var app = angular.module('app',[]);
app.controller('ctrl', function($attrs) {
alert($attrs.test);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" test="hello world">
</div>
In Angular world you should use directives to manipulate with DOM elements. Here a nice explanation how to get attribute value from custom directive (How to get evaluated attributes inside a custom directive).
But if you still want to get it's value from controller you are able to use jQuery as well $('#project_configuration').data('project-id')
Sorry, this seems a duplicated questions, but I tried all answered questions close to my question, with no success.
I am trying to introduce angular.js into a legacy system.
the system is using the .load jquery function to dynamically load div content with a page from an ASP.NET MVC page.
my brief html will look like this
<body ng-app="myApp">
<div ng-controller="myCtrl">
any content...
<div id="dyncontent"> </div>
</div>
and my javascript legacy code looks like
$('#dyncontent').load('/showviewcontent');
I added in the dynamic content, some angular directive and binding instruction
my angular code is like this
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
.....
});
How to make the binding / angular directive works on the newly added content?
You need to manually start the angular module using angular.bootstrap
$('#dyncontent').load('/showviewcontent', function() {
angular.bootstrap(document.getElementById('dyncontent'), ['myApp']);
});
i use phonegap and onsen-ui in my application.
how to create loading with onsen in my app?
Thank you
sorry for my poor english.
Or you could use modal to show loading screen like this.
<ons-modal var="modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Please wait.<br>Loading...
</ons-modal>
then call the modal.show(); in your controller to show the modal and modal.hide(); to hide it.
Use ngShow or ngHide.
The following is the sample code.
<script>
var myApp = angular.module('myApp', [ 'ngTouch', 'onsen.directives']);
myApp.controller('SampleCtrl', function($scope, $timeout){
$scope.isShow = true;
$timeout(function(){
//If page content was loaded, set the false to $scope.isShow.
$scope.isShow = false;
},'2000')
});
</script>
</head>
<body ng-controller="SampleCtrl">
<div ng-show="isShow">
<!--Define your loading screen animation with HTML and CSS.-->
</div>
</body>
</html>
You need to define css animation by yourself. However, there are many useful tools to create loading animation like this.
You can also use the placeholder..
https://onsen.io/reference/ons-loading-placeholder.html
I am trying to create a tooltip based from from this post
Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding
I successfully created the popup but I have trouble delivering the content to my popover.html
I added this to my script.js
var app = angular.module('myApp', ['ui.bootstrap', 'ian.bootstrap']);
app.controller('myCtrl', function ($scope) {
$scope.item = {
title: 'Original Title',
content:'content 1' //newly added item
};
$scope.text = 'Click me';
});
and I want to display it in my popover.html
<div class="popover-content">
{{item.content}}
</div>
It doesn't show anything. Can someone help me about it? thanks a lot!
my plunker
http://plnkr.co/edit/5pBZ9qq79OPl2tGEeYYV?p=preview
Here is your updated working Plunkr
Basically you have to pass the attr iantooltip-content with the binding of the content item, not the raw text, and after in the directive pass in the directive isolate scope options the binding of the content like :
iantooltipContent: '='
Just change the appenToBody variable and you're done.
You should read the docs for more infos about Angular directive :)
You can add the ng-controller in your div and then specify the controller name like so :
<div class="popover-content" ng-controller='myCtrl'>
{{item.content}}
</div>
Before the use cases, the basic syntax to create a custom directive.
For all the code samples in this page I started from the angular-seed template.
Starting from the angular-seed skeleton is quite easy to extract a model to begin to implement custom directives.
<html ngApp="myApp">
...
<div my-first-directive></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/directives.js"></script>
...
</html>
I'm trying to make an angularjs jfiddle for another question, but I can't get it working. Can somebody look at it and let me know what I'm doing wrong?
<div ng-app="myApp">
<div ng-conroller="MyController">
Click me: <input type="checkbox" ng-model="checked"/><br/>
<div>
{{checked}}
</div>
</div>
</div>
js:
var app = angular.module('myApp', [
'ngAnimate',
'my.controllers'
]);
var controllers = app.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
$scope.checked = true;
});
fiddle link
fiddle link without external libraries
fiddle link with only ng-animate ext library
Can it be that it's because jsfiddle adds a "http://fiddle.jshell.net/_display/" in front of any external library location? Like when I try to add "ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js" then jsfiddle changes it to "http://fiddle.jshell.net/_display/ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"
WHY?
You need to set option no wrap - in <body>
You should use:
var controllers = angular.module('my.controllers', []);
Instead of:
var controllers = app.module('my.controllers', []);
This fiddle works: http://jsfiddle.net/NBhn4/1/
EDIT:
To work with ng-animate you need to include external libraries in correct order and use No-Library (pure JS) option or eg. any jQuery library:
Updated fiddle: http://jsfiddle.net/NBhn4/175/
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/furkankatman/trgrjwf1/7/