I am new to angular js. I am trying out an example from http://egghead.io/lessons/angularjs-directives-talking-to-controllers but somehow it does not seem to work correctly for me.
here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/twitterApp.js"></script>
</head>
<body>
<div ng-app="twitterApp">
<div app-controller="AppCtrl">
<div enter="loadMoreTweets()">Roll over to load tweets.</div>
</div>
</div>
</body>
</html>
here is app, controller and directive
var tApp= angular.module("twitterApp",[])
tApp.controller("AppCtrl", function ($scope) {
$scope.loadMoreTweets = function () {
alert('Loading tweets.');
}
})
tApp.directive("enter", function () {
return function (scope, element, attrs) {
element.bind("mouseenter", function () {
scope.$apply(attrs.enter);
})
}
})
the problem is below statement seems to be failing and I can't figure out the reason since I did exactly the way it is done in demo.
scope.$apply(attrs.enter)
I even tried following but error console displays loadMoreTweets is not found, any help is greatly appreciated.
scope.loadMoreTweets()
<div app-controller="AppCtrl">
should be
<div ng-controller="AppCtrl">
Related
I am using emojionearea in angularJs project . when i parsed unicode to emojis smiley faces using my custom directive it gives me error Refrence Error . emojione is not defined . here is directive
app.directive('emojifyIt', emojifyIt);
function emojifyIt($timeout) {
console.log('directove bya sad')
return {
link : function(scope, element, attributes){
console.log(attributes['emojifyIt']);
element.html(emojione.unicodeToImage(attributes['emojifyIt']));
}
};
}
if i use $timeout function in this it works fine.
e.g
app.directive('emojifyIt', emojifyIt);
function emojifyIt($timeout) {
console.log('directove bya sad')
return {
link : function(scope, element, attributes){
console.log(attributes['emojifyIt'])
$timeout(function() {
element.html(emojione.unicodeToImage(attributes['emojifyIt']))
}, 1000);
}
};
}
is there solution for this so that i dont use timeout function it should load script and javascript code before rendering the directive
my html code is
<span emojify-it="😁😂😃asd😶😚😙"></span>
here is complete html file
Edited
<html>
<head>
<link rel="stylesheet" href="components/emojionearea/dist/emojionearea.min.css">
<script src="components/jquery/dist/jquery.js"></script>
<script src="components/emojionearea/dist/emojionearea.min.js"></script>
<title>
emoji example
</title>
<style> .ng-cloak { display: none !important; } </style>
</head>
<body ng-app="emojiApp" ng-controller="mainCtrl">
<span emojify-it="😁😂😃asd😶😚😙"></span>
<script src="components/angular/angular.js"></script>
<script src="components/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
<script>
$(function(){
$("#emojionearea2").emojioneArea({
pickerPosition: "bottom",
tonesStyle: "radio"
});
})
</script>
want this result without timeout
fiddle link is
fiddle link
I have this simple angular example where I want to capture a mouse right click for a custom action. The default context menu must not show up. I read the questions here at SO. Unfortunately I cannot stop it from opening the browser built in context menu. I'm sure I'm missing something simple here. (see plunker http://plnkr.co/edit/YieQh23xNUFmPrjZscGB)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Plunk</title>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="plunker" ng-controller="myController">
<p ng-mousedown="mouseClicked($event)">Click me!</p>
</body>
</html>
script.js
var app = angular.module('plunker', []);
app.controller('myController', ['$scope', '$log', function($scope, $log) {
$scope.mouseClicked = function(event) {
if (event.button===2) {
$log.debug('right mouse click detected')
// don't do anything else
event.preventDefault();
event.stopPropagation();
}
};
}]);
If you are going to disable the context menu, you need to listen to the contextmenu event in order to stop it.
To achieve this in angular, maybe you need to add a custom directive:
app.directive('noContextMenu', [function() {
return function(scope, ele, attr){
ele.on('contextmenu', function(e) {
e.preventDefault();
});
}
}]);
<p no-context-menu >Click me!</p>
Probably it is "old school" using alerts when learn or debug JS, but sometimes I decline to such approach. I am learning angularjs, and it is very difficult to understand scheduling, I mean step by step how angularjs is executing different directives.
As an instance, here small app in angularjs, and I can not understand why on one alert there are 5 messages???
http://plnkr.co/edit/8j7D0J0a6By447whhpa3?p=preview
<!doctype html>
<html>
<head>
<title></title>
<style>
.red
{
color:red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="demoApp">
<div ng-controller="testCntr">
<span ng-class="{red: setClass()}">Test color</span>
<div>{{setClass()}}</div>
</div>
</body>
</html>
JS
demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
$scope.setClass = function () {
alert('test');
return true;
}
});
The problem is that you're calling that function over and over again. Change it to be event driven and you'll be good:
http://plnkr.co/edit/zh0kIs?p=preview
html
<body ng-app="demoApp">
<div ng-controller="testCntr">
<span ng-class="{'red': changeClassModel}">Test color</span>
<br><br>
<button ng-click="setClass()">Hooray Alerts!</button>
</div>
</body>
js:
demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
$scope.changeClassModel = false;
$scope.setClass = function () {
alert('test');
$scope.changeClassModel = true;
return true;
}
});
I'm new in Angular, so maybe I missing something. Does anybody know, what's wrong with expression state in such case:
The value 'isDisable.state' change in 'p' tag, but not in 'ng-disabled'. The button doesn't change it state to disabled.
Here is the plunk:http://plnkr.co/edit/zc8k9oCUxlMRCkZKjQa5?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example53-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module('switcher',[]);
myapp.controller('switchState', function ($scope) {
$scope.isDisable = {'state':false};
$scope.toggle = function () {
$scope.isDisable.state = !$scope.isDisable.state;
}
});
</script>
</head>
<body ng-app="switcher">
<div ng-controller="switchState">
<button ng-click="toggle()">toggle</button>
<button ng-disabled="{{isDisable.state}}">Disabled</button>
<p>{{isDisable.state}}</p>
</div>
</body>
</html>
Remove the {{}}
ng-disabled="isDisable.state"
I'm trying to figure out how to write a very basic AngularJS app that performs an animation when a button is clicked, I can't figure out why it's not working I copied a tutorial in verbatim and can't figure out why the tutorial is wrong.
UPDATE: I got it working, for some reason there was another ng-app inside the html tag. You can copy the code below and load it up immediately and play around with animations if you copy everything:
Here's what animatetest.html looks like:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Top Animation</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<button id="my-button" class="btn-primary" ng-click="app.fadeIt()">Click to fade</button>
<div id="my-badge" class="badge" hide-me="app.isHidden">Fade me</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script>
<script src="test.js"></script>
</body>
</html>
And here's what test.js looks like:
var app = angular.module("app", ["ngAnimate"]);
app.controller("AppCtrl", function () {
this.isHidden = false;
this.fadeIt = function () {
this.isHidden = !this.isHidden;
}
});
app.directive("hideMe", function () {
return function (scope, element, attrs) {
scope.$watch(attrs.hideMe, function (newVal) {
if (newVal) {
TweenMax.to(element, 1, {opacity: 0});
}
})
}
});
UPDATE 2: Here's a sample plunker that's 10x better than the example above since it removes the need for a third party TweenMax library to do the actual animation:
http://plnkr.co/edit/WU6y8ka0udXHzZvCeZPc
No. Well yes... but the biggest problem is you're following a tutorial that is buggy. You have ng-app twice... once nested. It's got jquery selectors inside an angular function on an element... and jquery isn't even loaded.
And you're using a fairly old version of bootstrap (relatively speaking).
There are 2 better options than using jquery in your tween function... First, you could specify exactly which element by passing it as a parameter in your fadeIt function, or better yet, handle this via a custom directive using isolate scope.
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Top Animation</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-controller="AppCtrl as testApp">
<div id="my-button" class="btn btn-primary" click-fade>Fade me</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
<script src="test.js"></script>
</body>
</html>
test.js:
angular.module("app",['ngAnimate'])
.directive('clickFade',function(){
return function(scope, element) {
element.bind("click", function() {
TweenMax.to(element, 1, {opacity: 0});
})
}
})
Notice how I removed the use of jQuery, and also your function for clicking/fading was on the wrong element.