I'm trying to setup a ngAnimate .animation() script with Angular 1.4 but I am struggling with the basics as this should display an alert but it does not :
.animation('.animated', function () {
// should display an alert here...
alert('hello ?');
})
I must be missing something but can't figure out what.
Here is a jsfiddle.
Thanks a lot for your help.
Animation is triggered using one of directives described here Docs. For example ngClass. Demo.
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<span ng-class="{animated: true}">Hello {{who}}.</span>
</div>
</div>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;" /> Is Visible...
<span class="animatedsomething" ng-show="checked">Hello {{who}}.</span>
</div>
</div>
and
angular.module('MyApp', ['ngAnimate'])
.controller('MyCtrl', function ($scope) {
$scope.who = 'World';
})
.animation('.animatedsomething', function () {
// should display an alert here...
alert('hello ?');
});
seems to generate the alert. Not sure why. Quoting from https://docs.angularjs.org/guide/animations "AngularJS 1.3 provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service.", may be you need one of those directives for the animation to be applied.
Related
First, ng-app should be to set the area where angular take place, right? Even if there is ng-controller tag outside ng-app, they should be omitted?
However, when I test on jsfiddle (link here), it seems this is not the case:
HTML
<div ng-app="myApp">
<div ng-controller="MyCtrl">
Hello, {{name}}!
<input ng-model="name">
</div>
</div><br><br>
<div class="not-inside-my-app">
<div ng-controller="MyCtrl">
...... Some Many other content in real case that I don't want angular to touch .......<br>
So this is to test angular is not working here.<br>
Hello, {{name}}!
<input ng-model="name">
</div>
</div><br><br>
<div ng-app="myApp">
<div ng-controller="MyCtrl2">
Hello, {{name}}!
<input ng-model="name">
</div>
</div>
Javascript
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', MyCtrlFunction]);
function MyCtrlFunction($scope) {
$scope.name = 'Superhero';
}
myApp.controller('MyCtrl2', ['$scope', MyCtrlFunction2]);
function MyCtrlFunction2($scope) {
$scope.name = 'Non-superhero';
}
The angular code is still working in the middle div. Is my concept on ng-app wrong? Or what have I missed to limit the scope?
P.S. I know I can control the scope by using ng-controller, but it seems to be a waste on resource to do scanning on sections that I know I don't need angularJS.
Since ng-app attribute added to body tag, which is why all controllers are running.
Since angular considers first ng-app attribute and ignore other ng-app attributes. The above code is working.
NOTE: Though the code written in the html section didn't contain the body tag. You can able to insert the body tag by clicking on the gear icon in the html section of fiddle site. Which is what the main cause for this addition of ng-app attribute added to body tag. Thanks for pointing it out Durga
remove body tag <body ng-app="myApp"> from html section, there is no issue with jsfiddle.
It seems some issue with JS jsFiddle, try to run the same example in you local machine it will not work or here you get the answer:
https://www.w3schools.com/code/tryit.asp?filename=FEYVPGYHZAY5
I am new to angularjs and I have been trying out few basic tutorials and I noticed some discrepancy on how controller is declared and used thus I wanted clarification
, for example in this JSfiddle link - http://jsfiddle.net/dakra/U3pVM/ the user has defined the controller as the function name which works perfectly fine for version 1.0.3 . I am using 1.3.15 version of angular and this approach isn't working for me
<html ng-app="myapp">
AngularJS data binding
<div data-ng-controller="SimpleController">
Name :
<br/>
<input type="text" ng-model="name"/>{{name |uppercase}}
<div>
<ul>
<li ng-repeat="personName in names">{{personName}}</li>
</ul>
</div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.names =['test1','test2','new'];
}
The above code just isn't working as it's showing an error of SimpleController being undefined function.
where as when I add this code instead of the above function, it works -
var app = angular.module('myApp', []);
app.controller('SimpleController', function($scope) {
$scope.names = ['test1','test2'];
});
Thanks,
The simple declaration of controllers via
function MyCtrl($scope) {
}
was removed in Angular 1.3. Breaking changes: http://wildermuth.com/2014/11/11/Angular_1_3_and_Breaking_Change_for_Controllers
I'm quite new to javascript in general. I've spent the past couple of weeks building a front end with Angular.js.
I have a number of directives I've defined that sit on my page, Angular has been great for this.
Here's what my main page looks like:
<body class="body" ng-controller="OverviewController as overview" font-size:1em>
<sidebar-menu ng-controller="PanelController as panel"></sidebar-menu>
<div id="content" >
<div>
<div class="list-group">
<div class="list-group-item" ng-repeat="site in overview.sites" ng-click="">
<div class="item-heading">
<h3>{{site.name}}</h3>
<p>Address: {{site.address}}</p>
Click Here
</div>
<installationsite-panels ng-controller="PanelController as panel"></installationsite-panels>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.paulund_modal').paulund_modal_box();
});
</script>
</body>
Note the javascript function to call a modal box at the bottom, using this tutorial.
I've spent the past few days trying different tutorials to get modals to work in my webapp, but with no success. I think it's down to my lack of understanding of Angular and Javascript in general.
In any case, I've managed to get this tutorial to work using JQuery, and when I click on the link, the modal opens as expected.
However, I don't want to call this modal from here. I want to call it from a directive that's embedded within the <installationsite-panels> directive in the above code, which looks like this (just a single section shown here):
Device Statuses
<div>
<div class="device-icon-group">
<div class="device-type1-icons" ng-click="panel.showDevices(3)" ng-show="showtype1Red"><img src="img/type1red.png" style="width:50%; height:50%;"/></div>
<div class="device-type2-icons" ng-click="panel.showDevices(3)" ng-show="showType2Red"><img src="img/type2red.png" style="width:50%; height:50%;" /></div>
</div>
<div class="service" ng-click="panel.showDevices(3)" ng-show="showService">
<b>{{panel.getServiceDeviceCount()}} device needs servicing</b>
</div>
<div ng-show="showServiceList">
<device-list-service></device-list-service>
</div>
</div>
The directive <device-list-service> shows a list of items like so:
<div ng-controller="DevicesController as deviceList" font-size:1em >
<div id="device-list-group">
<div id="device-list-group-item" ng-click="" ng-repeat="device in deviceList.devicesService">
<div ng-class="device.status"><img src="{{(device.type == 'type1') ? 'img/type1white.png' : 'img/type2white.png'}}"> </div>
<div class="device-params">
<b>ID: </b> {{device.id}}<br />
<b>Type: </b> {{device.type}}
</div>
<div class="device-params">
<b>Location: </b> {{device.location}}<br />
<b>Action: </b> {{device.action}} <br />
</div>
</div>
</div>
</div>
I want to show the modal when the user clicks on one of the list-group-item 's, and display some data relating to that item.
The modal works fine from the top level in the main app, but I cannot call it from within any of the directives. How can I do this?
Is it possible, or do I need to scrap my JQuery modal and do it the Angular way, which hasn't worked for me for the past few attempts.
Don't use jquery modals. You can, but you shouldn't.
Instead, I recommend using Angular UI, which has a pretty usable modal implementation: https://angular-ui.github.io/
Second alternative: if you don't like Angular UI, then use AngularJS + Bootstrap, and create your own custom directives
Third alternative: Use jQuery.
If you still want to go with the 3rd alternative, despite my advice against it, then here is how you do it:
var app = angular.module('app', []);
app.directive('modal', function($http, $timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
$timeout(function() {
element.paulund_modal_box();
}, 0, false);
}
};
});
Usage:
<div modal></div>
Some explanation is needed here.
Why is the $timeout service necessary? jQuery plugins often require the DOM to be fully loaded in order to work properly. That is why most jQuery plugins are wrapped inside of a $(document).ready block. In AngularJS there is no concept of DOM ready, and there is no easy way in AngularJS to hook into the event. However, there is a well-known hack, which is to use the $timeout service. In Angular there are three phases:
1. compile - Angular walks the DOM tree looking for directives
2. Link - Angular calls the link function for each directive to setup watch handlers.
3. Render - Angular updates the views
Using $timeout within the Link function queues the $timeout function to be executed until after the current closure is done executing. It just so happens that the Render phase is within the current closure's scope of execution. Hence, the $timeout function will execute after the render phase, when the DOM has been loaded.
Mixing JQuery and Angular in that way is maybe a little messy, but sometimes you do want to use a well-built component. You could try to find a similar modal in Angular - angular-modal - or you could try and build the component into your Angular directive itself - jQuery Plugins in AngularJS
I have the following main view
<div ng-include="'otions.html'"></div>
and options.html has the following
<div ng-controller="OptionsController">Options</div>
<input type="text" ng-model="keyword" value="{{keyword}}" />
<button ng-click="search()">Search</button>
But "keyword" is not binding to the scope in OptionsController.
app.controller('OptionsController',
['$scope', function($scope) {
$scope.keyword = "all";
$scope.search = function() {
console.log("hello")
};
}]);
when I click on the button, I don't see hello and the keyword all doesn't appear in the input text.
I tried moving the ng-controller part as follows
<div ng-controller="OptionsController" ng-include="'otions.html'"></div>
And things work as expected.
I read through the answers in AngularJS - losing scope when using ng-include - and I think my problem is related, but just need some more explanation to undertstand what's going on.
You should write options.html like this:
<div ng-controller="OptionsController">Options
<input type="text" ng-model="keyword" value="{{keyword}}" />
<button ng-click="search()">Search</button>
</div>
OptionsController should be put in the outer html element.
i have face same problem,
Under main tag it will be work fine but, When bind some data to nav.html it not work.
find this link
AngularJS - losing scope when using ng-include
inside include its work child scope.
better option to create custom directive its easy solution
I was trying to make a blog in angularJS and on the post message section I want to get the message from json and add it to a content div like this
<div class="content">
{{json.message}}
</div>
Now my div has a paragraph in it, it's practically a html code like this
<p>this is my message</p>
but when i do this, i see on the screen this
<p>this is my message</p>
as text. I understand in previous versions i could use ng-bind-html-unsafe but i am using v1.2 of angularJS. Can anyone please show me code similar to ng-bind-html-unsafe so that I can make this work in v1.2?
Thank you, Daniel!
You can use the Strict Contextual Escaping services ($sce) in 1.2
Controller:
function myCtrl($scope,$sce) {
$scope.myHtml = $sce.trustAsHtml('<span>Hello World!</span>');
}
Template:
<div ng-app ng-controller="myCtrl">
<div ng-bind-html="myHtml"></div>
</div>
Example: http://jsfiddle.net/TheSharpieOne/GKnrE/1/
You'll need to inject and use the $sce service to mark it as trusted HTML, then use the ng-bind-html directive (plunkr):
app.js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce) {
$scope.name = $sce.trustAsHtml('<p>Hello World</p>');
});
index.html:
<body ng-controller="MainCtrl">
<div class="content" ng-bind-html="name"></div>
</body>