Whatever i do ng-click of AngularJS in paper-button within polymer-element it doesn't work, is there any file to import? please tell me step by step what should i do.
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/paper-button/paper-button.html"/>
<link rel="import" href="../components/core-signals/core-signals.html">
<polymer-element name="my-statut-footer_OnEdit">
<template>
<div class="tag-container">
<paper-button class="shadow" ng-click='annulerClick()'>Annuler</paper-button>
<paper-button class="colored shadow" ng-click='publierClick()'>Publier</paper-button>
</div>
</template>
<script>
Polymer('my-statut-footer_OnEdit',{
});
</script>
</polymer-element>
The best solution that I've found is to use polymer's on-click event, then inside the method select the angularjs controller by his id
<paper-button on-click='publierClick()'>Publier</paper-button>
Polymer('my-statut-footer_OnEdit',{
publierClick: function(e, detail, sender) {
var scope = angular.element(document.getElementById(('controllerID')))
.scope();
scope.$apply(function () {
scope.publier();
});
}
});
Polymer and Angular are not compatible with each other.
Polymer makes extensive use of the brand new Web Components standards which Angular know literally nothing about so when Angular's Compiler comes across a Custom Element it tries to use it as a Angular Directive which it is actually not so it throws lot of errors.
Here are a few Solution:
Use ng-polymer-elements which helps Polymer elements be compatible with Angular.
Wait for Polymer 0.8 and hope it goes along with Angular.
While you are here please make sure to view some answers for the Following question this might help you understand some technical differences between polymer and angular:
What is the difference between Polymer elements and AngularJS directives?
For now there is no efficient way to achieve it. I used Iframe to make it working. Hope will find better solution, but for now angular can't work efficient with shadow html generated by polymer.
Related
I know there are some libraries that can do this but I would like to do something as simple as possible and I didn't see any examples that were for an AngularJS app. The problem is I do not know where to start.
Can someone give me some advice or point me in the right direction.
angular
.module('test', [])
.run(function($rootScope) {
$rootScope.isIpad = /ipad/i.test(navigator.userAgent);
})
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
<h1>is iPad? <span ng-bind="isIpad | json"></span></h1>
</section>
if you want to have a more robust solution, have a look here Detect iPad users using jQuery?
What's the best way to create a dynamic slideshow using angular 1.3? I would like to build one, I was trying with http://jquery.malsup.com/cycle2/ but it doesn't work when use angular.js at the same page.
<div ng-repeat="diaporama in diaporamas" class="cycle-slideshow">
<img class="diaporama-img" src='{{diaporama.photo_file_name | image_diaporama_path_format: diaporama.id}}'/>
</div>
<script>
$(".cycle-slideshow").cycle();
</script>
I believe in order to achieve what you desire you'll be looking to create a directive for that purpose.
A good start would be referring to angulars documentation on directives.
Hope that helps!
I am new to caman js. I want to edit image residing at my local machine using caman js. I searched for it but could not find appropriate code. I also went through tutorial of caman js.
link: http://camanjs.com/guides/
Can anyone please help me?
Thank you.
The link you provided gives the information you are looking for. If I understand your question correctly, these are the basic steps you need to take.
Make sure the Camanjs plugin is included in your project.
Have an img or canvas element on your working DOM
After the DOM is ready Initialize Camanjs by passing to it either a selector or DOM element. Here is the relevant code to the link you provided:
Caman("#image-id", function () {
// Setup whatever options or image processing you want here
// Make sure to render after
this.brightness(5).render();
});
Your question asks about a file on your local machine. From my understanding, your image has to be present in the DOM to work on it with Camanjs. Therefore, your image should be located somewhere your html/javascript can find. (i.e. 'img/myLocalPicture.jpg' relative to your .html file)
For me, looking at the source code of Camanjs was very helpful as well as looking at the API docs: http://camanjs.com/api/
If you want a more specific answer please rephrase your question to be more specific.
You can load a file using the HTML5 File API.
If you are using JQuery, the following will allow you to browse for a local file, and then apply an effect to it. (You don't need jquery, this is just a feature of HTML5)
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/caman.full.min.js"></script>
</head>
<body>
<img id="myimage" alt="Image go here" />
<form>
<input type="file" id="fileinput" />
</form>
</body>
<script>
$("#fileinput").change(function(evt) {
var image = evt.target.files[0];
$("#myimage").attr("src", URL.createObjectURL(image));
processImage();
});
function processImage() {
Caman("#myimage", function() {
// Perform your effects here
});
}
</script>
</html>
Sorry for the silly question, does everyone know how to start using AngularUI? I've downloaded it from Github and read the instruction in README but still don't understand what I have to do.
Steps to integrate:
Include jQuery and jQuery-ui (best served from a CDN)
Include angular (it is the best to include if from a CDN)
Include angular-ui JS / CSS (currently only hosted in the GitHub repository in the build folder)
Include any jQuery plugins for the directives you are planning to use
Declare dependencies on the angular-ui modules (ui.directives or ui.filters depending on what you are planning to use).
Most of the outlined steps are just about including JS/CSS dependencies. The only "tricky" part is to declare dependencies on a ui.* module, you can do it like this:
var myApp = angular.module('myApp',['ui.directives']);
Once all the dependencies are included and a module configured you are ready to go. For example, using the ui-date directive is as simple as (notice the ui-date):
<input name="dateField" ng-model="date" ui-date>
Here is the complete jsFiddle showing how to use the ui-date directive: http://jsfiddle.net/r7UJ2/11/
You might also want to have a look at the sources of the http://angular-ui.github.com/ where there are live examples off all the directives.
As of 3rd of May 2013, here are the steps:
include
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-0.3.0.min.js"></script>
register ui
angular.module('myFancyApp', ['ui.bootstrap']);
make sure myFancyApp is the same as in your <html ng-app="myFancyApp">
Let the magic commence.
I think what is missing is plugins - you've got to add the jquery plugin scripts and css for some angular-ui directives to work. For example the codemirror directive needs:
<script src="http://codemirror.net/lib/codemirror.js" type="text/javascript"></script>
<script src="http://codemirror.net/lib/util/runmode.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css" type="text/css" />
It's a surprise to me that angular-ui.github.com doesn't mention needing to include plugins.
Hi I wrote an article specifically on how to do this for for PHP syntax highlighting. The article is here: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/
The core of things is getting the configuration right:
var myApp = angular.module('myApp', ['ui']);
myApp.value('ui.config', {
codemirror: {
mode: 'text/x-php',
lineNumbers: true,
matchBrackets: true
}
});
function codeCtrl($scope) {
$scope.code = '<?php echo "Hello World"; ?>';
}
For something like the following HTML snippet:
<div ng-app="myApp">
<div ng-controller="codeCtrl">
<textarea ui-codemirror ng-model="code"></textarea>
</div>
</div>
You can see the whole jsfiddle of the set up here: http://jsfiddle.net/jrobertfox/RHLfG/2/
pkozlowski.opensource is right, there are a lot more files that you need to include than it seems from the AngularUI documentation (if you can call it documentation...)
The instructions are in the readme.md file at their official github repository
Angular UI
Alternatively, the way you can find out how to integrate is to open the angular-ui js file (example: ui-bootstrap-tpls-0.6.0.js) and in the first line, you will notice the following statement
angular.module("ui.bootstrap", [...deps...])
Based on the above code, you need to inject 'ui.bootstrap' into your module.
angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);
Ok, I am playing around with Backbone, node.js, Underscore, Backbone Boilerplate so I have enough knowledge. Been asking questions like crazy as I still can't quite get my head around it. I am currently attempting to use the Underscore library with Backbone Boilerplate to make a very simple template which will allow me to pass in data; then when the model is updated, change the view which would change the template. I believe this is the correct way of doing it, instead of writing HTML code inside my JS file? Stop me if I'm wrong.
The Backbone Boilerplate has its template .fetch() system which I understand. However it would mean writing HTML in my JS I believe. So I wanted to use Underscore to simply pass information from the model to the view to the modules to render the template again (or I might be able to skip the view completely?).
My question is why won't this work, I think it's because I'm not changing it to JSON.
My HTML template:
<div>
<script id="rtemp" type="text/x-underscore-template">
<span><%= title %></span>
</script>
</div>
And the JavaScript:
define([
// Global application context.
"app",
// Third-party libraries.
"backbone",
"underscore",
"json2"
],
function(app, Backbone) {
var Attempt = app.module();
Attempt.Model = Backbone.Model.extend({});
Attempt.Collection = Backbone.Model.extend({});
Attempt.Views.Tutorial = Backbone.View.extend ({
template: "app/templates/attempt",
render: function(done) {
var tmpl = app.fetchTemplate(this.template);
//console.info(tmpl);
this.$el.html(tmpl({title: 'This is a title'}))
}
});
return Attempt;
});
When I inspect the element it shows in the <div> however it still has the template script tags around it so doesn't show on the page in HTML. I tried using json2 to convert it to JSON first, but that didn't seem to work unless I did something wrong. Is Underscore the best thing to use? I assumed so as it's a Backbone dependency. Or should I use something else. I just want to avoid writing HTML in my JS.
If I understand you right, you're ending up with this HTML:
<div>
<script id="rtemp" type="text/x-underscore-template">
<span>This is a title</span>
</script>
</div>
That's the right behavior based on the code you're using but that's clearly not the result you want.
The <script> wrapper for templates is used when you're embedding the template inside an HTML page. This is done so that the browser won't try to interpret your template as HTML and to keep the browser from trying to render it on its own. In such cases, you'd have the template embedded in the HTML page like this:
<!-- Some HTML stuff... -->
<script id="rtemp" type="text/x-underscore-template">
<span><%= title %></span>
</script>
<!-- Some other HTML stuff... -->
and you'd use it like this:
var t = _.template($('#rtemp').html());
var html = t(...)
The $('#rtemp').html() part extracts just the content of the template's <script> wrapper so _.template would only see <span><%= title %></span> and the final processed template would just be a simple <span>. For example: http://jsfiddle.net/ambiguous/dzPzC/
In your case, you're reading the entire <div><script>...</script></div> as the template and feeding that to _.template. The result is that tmpl({title: 'This is a title'}) still includes the <script>, the browser doesn't know what to do with a <script type="text/x-underscore-template"> so the <span> that you're interested in doesn't get rendered at all.
You don't need the <script> wrapper at all, that's only needed when you're embedding a raw template inside some HTML. Your template only needs the the content of your <script>:
<span><%= title %></span>
Demo: http://jsfiddle.net/ambiguous/QuwSX/
The argument that you're passing to the template function:
tmpl({ title: '...' })
is fine, the compiled template function just wants to see a JavaScript object. People talk about passing it JSON and often use the toJSON method to prepare data for the template but that's an abuse of terminology; the template really wants an object and JSON is, technically, a string.