I'm coding an application using AngularJS v1.3.0 and Foundation 5.0.3. In one of my pages, I have a a couple of fieldsets, each one containing a few range sliders. Something like this
<fieldset ng-repeat="element in list" id="element_{{element.ID}}">
<legend>Element: {{element.name}}</legend>
<div ng-repeat="subelement in element.list" id="subelement_{{subelement.ID}}">
<div class="small-10 medium-11 columns">
<div class="range-slider round" data-slider="50">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
</div>
</fieldset>
The problem is I can't move the sliders until I open the browser console. It happens in Firefox and Chrome. I guess AngularJS defines some variables when the debug mode is activated in the browser, and this causes the problem. But I don't really know...
Any clues?
Many thanks in advance
Try adding this run function to your angular app.
.run(function($rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
$(document).foundation();
});
});
While this doesn't have the range slider in it yet, if you are using angular with foundation you should check out this: http://pineconellc.github.io/angular-foundation/
Foundation range slider port for Angular at https://github.com/fulup-bzh/RangeSlider
Related
I am developing an AngularJS Chrome app, and using the chrome.fileSystem.chooseEntry API, a user can choose a directory. I want to show the user the selected directory, also save the details into local storage to use it everytime the app load.
The former part - show the selected directory to the user does not seem to work.
Here's my template:
<div class="content" ng-controller="SelectCompanyController">
<form role="form">
<div class="form-group">
<strong>Add a New Company</strong>
</div>
<div class="form-group">
<label for="companyName">Enter Company Name</label>
<input id="companyName" type="text" class="form-control" ng-model="newCompany.companyName" style="width:80%"/>
</div>
<div class="form-group">
<label for="location" style="display: block">Select Company Folder Location</label>
<button id="location" ng-click="getUserSelectedFolder()">Choose Company Folder</button>
{{newCompany.location}}
</div>
</form>
</div>
My Controller:
app.controller('SelectCompanyController',['$scope','ReadLocalDBDataService',
function($scope, ReadLocalDBDataService){
$scope.newCompany={};
getUserSelectedFolder=function(){
ReadLocalDBDataService.getUserSelectedFolder().then(function(fileEntry){
chrome.fileSystem.getDisplayPath(fileEntry, function(displayPath){
console.log(displayPath);
$scope.newCompany.location=displayPath;
console.log($scope.newCompany);
});
});
};
$scope.getUserSelectedFolder=getUserSelectedFolder;
}]);
My service
app.factory('ReadLocalDBDataService',['$q', function($q){
var getUserSelectedFolder=function(){
var deferred=$q.defer();
chrome.fileSystem.chooseEntry({type: 'openDirectory'}, function(fileEntry){
if(!fileEntry) deferred.reject("Please select the folder where the Companys' files are present");
else{
var error = chrome.runtime.lastError;
if(error) deferred.reject("An error occurred while selecting the folder. Details: "+error);
else{
deferred.resolve(fileEntry);
}
}
})
return deferred.promise;
};
return {
getUserSelectedFolder: getUserSelectedFolder
};
}]);
In my controller, I have got logs showing that that folder has been set to something like ~/Dropbox/folder... Why is this not showing up on the screen?
Edit:
I just realised that, after I select the folder once, nothing happens, but if I select the folder again, then it shows up. Why is not showing up the first time?
Here's a response from a developer of the chrome.fileSystem APIs when I asked him to look at your question.
"This question might be written in such a way as to be to be easier to answer. (Its a lot easier when the user can reduce their problem down to a simple example.) I can't immediately find anything wrong with it, but it sounds like the Chrome API part is working fine, but the display isn't updating for some reason ("In my controller, I have got logs showing that that folder has been set to something like ~/Dropbox/folder... Why is this not showing up on the screen?"). I don't know Angular so I can't help with that."
It sounds like his suggestion is to
1.) Reduce the example down to something as simple as possible.
2.) Investigate why the display might not be updating the first time.
I have a directive which contains an iScroll element, which is built with li from an ng-repeat:
<div class="my-film">
<div class="filmstrip-container">
<div class="scroll-wrapper">
<ul class="film-container">
<li ng-repeat="film in films"
ng-mouseover="onMouseOverItem($event)"
ng-mouseleave="onMouseLeaveItem($event)"
ng-click="openFilm()"
class='film-slide'>
...nested videos etc in here.
</li>
</ul>
</div>
</div>
</div>
In the directive's link function I have the onClick function like this
scope.openFilm = function() {
...code to open the film and play
}
This is working totally as expected on desktop, but when on Touchscreen (testing on an iPad) the openFilm() function is never called, however, the element does get the ng-click-active class applied.
I do have other event listeners on the li elements, but removing these didn't make any difference. Could it be something to do with iScroll?
We're using Angular 1.3, and have ngTouch added.
Try installing <script src="angular-touch.js"> provide dependency while initializing your app angular.module('app', ['ngTouch']); Hope this will help you. pleasae refer this page link
The problem here was the iScroll blocking my touch events. Passing {click: true} in as the options when initiating the iScroll fixed the problem.
iOS creates separate events for ng-mouseover, ng-click, ng-mouseleave, etc.
That means that your first tap will trigger ng-mouseover, your second tap will trigger ng-click, and your tap outside the element will trigger ng-mouseleave.
Saddly, I thought ngTouch would fix this issue created by iOS but it didn't. It fixed it only if you use css hover, but not if you use java script mouse events (including those of angular).
Hi guys I am using this http://www.jquery-steps.com/Examples as my wizard form plugins.
I notice that it has a conflict with Ckeditor plugin with an error of Uncaught TypeError: Cannot read property 'unselectable' of null.
I just tried the solution on this post Ckeditor with jQuery form wizard but it doesn't fix the issue.
What is the best solution for this?
I guess you put the CKeditor right into the wizard HTML code. In that case what´s really important to understand is that jQuery Steps manipulates DOM objects. That´s really bad for javascript code in general.
To run javascript controls within jQuery Steps you have to ensure that:
no javascript code goes inside your wizard HTML
first jQuery Steps code executes and then the javascript code that belongs to the HTML inside the wizard HTML
Good example:
<script>
$(function ()
{
// first jQuery Steps
$("#wizard").steps();
// then components inside jQuery Steps
$("#editor").ckeditor();
});
</script>
<div id="wizard">
<h1>Title</h1>
<div>
<div id="editor"></div>
</div>
</div>
Bad example:
<script>
$(function ()
{
$("#wizard").steps();
});
</script>
<div id="wizard">
<h1>Title</h1>
<div>
<script>
$(function ()
{
$("#editor").ckeditor();
});
</script>
<div id="editor"></div>
</div>
</div>
Cheers,
Rafael
I have some legacy jQuery code. It's a big chunk of code, so I would prefer to port it a little while later. To use it, I call $('#legacyId').legacyFunction().
Here's the deal, though.
I have an ng-if. And within that ng-if, I have the JavaScript where I call my legacy function.
<div ng-if="status=='yes'">
<div id="legacyId">
I am a legacy div!
</div>
<script type="text/javascript">
$('#legacyId').legacyFunction()
</script>
</div>
It looks like this JavaScript is being called when the page loads. Though I load angular after jQuery, it seems that angular removes the section under control of the ng-if, and therefore the jQuery function on #legacyId fails.
Any ideas? Thanks!
Edit-note: I import jQuery and the legacy code that extends jQuery at the top of my HTML document. Angular is loaded at the bottom of the document.
Edit-note 2: I have also tried <div ng-init="$('#legacyId').legacyFunction()"></div>, but I get an error, Error: [$rootScope:inprog] $apply already in progress.
Okay, managed to work this out.
In the HTML:
<div ng-if="status=='yes'">
<div legacy-directive>
I am a legacy div!
</div>
</div>
In my app code:
app.directive('legacyDirective' , function() {
return {
link: function(scope, element, attrs) {
$(element).legacyFunction(scope.$eval(attrs.legacyDirective));
}
}
});
Because of the $(element).legacyFunction(scope.$eval(attrs.legacyDirective));, it looks like I can also pass parameters to the legacyFunction; e.g. <div legacy-directive='{myParameter: true}>
Thank you for all who answered! You set me on the right track.
I have 2 CakePHP pages. Both of them use angularjs. Here's a snippet.
/items/items.ctp
<div id="ng-app" ng-app>`
<div ng-controller="ItemController">
Add
</div>
</div>
the function showAddPopup is defined as follows
$scope.showAddPopup = function() {
$.colorbox({href:'/items/add/' + $scope.order.id,open:true,close : "x", onClosed:function(){}});
}
/items/add.ctp
<div id="ng-app" ng-app>`
<div ng-controller="AddController">
<h2>{{order.label}}<h2>
</div>
</div>
Now, when I click on the add link from items view, I get a popup with the contents of add.ctp. But the problem is that instead of showing order label say 'My Order', the h2 tag is showing {{order.label}}
When I open add view from a page that doesn't use angularjs I get a proper result. What am I doing wrong. Please help. I have already wasted many days on this.
Maybe opening the colorbox with setting iframe could be the solution, if the problem is nested ng-apps.
$.colorbox({inline:false; iframe:true;href:'/items/add/'...});
If you are using bootstrap then angular-ui would be a great choice for above scenario