I have a modal that needs to display some code using codemirror and I am developing the app in AngularJS. The html looks like the following:
<div class="modal-body">
<div ui-codemirror="{onLoad:codemirrorLoaded}" ui-codemirror-opts="viewEventEditorOptions" data-ng-model="event.text"></div>
</div>
The problem I am having is that the code displays in the div only after I click inside it. I have tried refreshing the editor using an event like the following but it is not working:
$scope.codemirrorLoaded = function(_editor){
// Events
_editor.on("beforeChange", function(){ _editor.refresh() });
_editor.on("change", function(){ _editor.refresh() });
};
Any help is appreciated. Thanks.
You need to figure out the moment at which the editor becomes visible (it is apparently not visible when initialized), and at that point call its refresh method.
Add onload action to your options and refresh the codemirror after some milliseconds. Ex :
modalScope.editorOptions = {
lineWrapping : true,
lineNumbers: true,
readOnly: 'nocursor',
mode: 'yaml',
onLoad: function(_editor){
modalScope.editor = _editor;
// Load without click
setTimeout(function(){
modalScope.editor.refresh();
}, 100);
}
};
There was a directive called ui-refresh described on ui-refresh-directive so the following code worked. Thanks for the comments!
<div ui-codemirror="{onLoad:codemirrorLoaded}" ui-refresh="true" ui-codemirror-opts="viewEventEditorOptions" data-ng-model="event.text"></div>
I use ui-refresh="true", but it only show after click to it.
<div ui-refesh="true" ui-codemirror-opts="jsonEditorOption" data-ng-model="user.UserJsonDataParse"></div>
There is an display addon called autorefresh
https://codemirror.net/addon/display/autorefresh.js
include it in your scripts and use one of the fallowing options.
Option 1 HTML
<div ui-codemirror="{onLoad:codemirrorLoaded}"</div>
Option 1 TypeScript
codemirrorLoaded(_editor) {
// Editor part
var _doc = _editor.getDoc();
_editor.focus();
// Options
_editor.setOption('autoRefresh', true);
}
Option 2 HTML
<div ui-codemirror="{autoRefresh:true}">
Option 3 HTML
<div ui-codemirror ui-codemirror-opts="editorOptions">
Option 3 TypeScript
editorOptions{
autoRefresh:true
}
I've used a simple function to show the editor and change from true to false
// HTML
<div ng-show="editorEnabled">
<ui-codemirror ui-refresh="editorEnabled" ng-model="function"></ui-codemirror>
</div
// JS
$scope.editorEnabled= false;
$scope.enableEditor= function() {
$scope.editorEnabled= true;
}
Related
Following is the angular example for simple input field model binding.
<div ng-app>
<div>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>
</div>
</div>
How can I replicate the same functionality using meteor-blaze with Jade, i.e. input field change event will update the corresponding helper.
Update
Below is my code in Blaze and Jade:
.form-group
lable
| Click buttons to increase their values:
input#user(type="text")
span
|{{usernameinput}}
Below is javascript code:
Template.unitconversion.helpers({
'nm': function(){ return "100" }
});
Template.unitconversion.events({
'keyup #user': function(evt, tmpl){
var tor = tmpl.find('#user').value;
console.log(tor);
//console.log(evt);
//console.log(tmpl);
Template.unitconversion.helpers({
'usernameinput': function()
{
return tor
}
});
}
});
I was expecting the helper function to update the 'usernameinput' whenever user input is changed but nothing happens. I do get the expected console output whenever input field changes.
Any help would be appreciated to solve it.
Let me answer your question in "spacebars". I think you should be able to translate it to "jade" easily. First make sure you add reactive-dict package:
meteor add reactive-dict
It's little more complicated than you might have expected, but the following code should do the the job pretty well:
<template name="hello">
<h1>Wellcome {{myName}}!</h1>
<p>
Tell your name <input type="text" name="myName" value="{{myName}}"/>
</p>
</template>
and the corresponding javascript:
Template.hello.onCreated(function () {
this.state = new ReactiveDict();
});
Template.hello.helpers({
myName: function () {
return Template.instance().state.get('myName');
},
});
Template.hello.events({
'keyup input[name]': function(e, t) {
t.state.set($(e.target).attr('name'), $(e.target).val());
}
});
The reason this is so "complicated" is because Meteor does not offer a built-in two-way-data binding support. It does not mean it can't be done as the above example shows.
You can read more about two-way-data-binding in meteor cookbook here:
https://github.com/awatson1978/meteor-cookbook/blob/master/cookbook/data-binding.md#two-way-data-binding-1
As per Michel Floyd guidance following is the working code:
Jade Template:
.form-group
lable
| Click buttons to increase their values:
input#user(type="text")
span
| {{usernameinput}}
Javascript:
var usernameinput = new ReactiveVar(0);
Template.unitconversion.helpers({
usernameinput: function(){ return usernameinput.get();
}
});
Template.unitconversion.events({
'keyup #user': function(evt, tmpl){
var tor = tmpl.find('#user').value;
console.log(tor);
usernameinput.set(tor);
}
});
I am trying to make a loader that will show on every page and fade out when all the content is loaded. Here is my code so far:
<div id="loader-wrapper" data-loader-drct data-ng-hide="hidden">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div><!--end loader-wrapper-->
app.directive('loaderDrct', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$on('$routeChangeSuccess', function () {
var hide = false;
scope.hidden = hide;
scope.$on('$viewContentLoaded', function () {
hide = true;
scope.hidden = hide;
});
});
}
}
}]);
When I execute this code, the loader is hiding (with some CSS added), but when I go to another page, the loader is not shown again. The ng-hide class is still there, which means that this directive has already been executed and did not refresh after going to the new page.
How can I make the loader show and hide on every page?
ok, I found a solution made by michael. The problem is that the templates are loaded and the browser has no time to make the changes visible . You can find the full answer here: Angular js - show/hide loading gif every new route
For load while upload/download files
Add in index.html
<div id="loading_wrapper">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
And Add in controller.js
var $loadingWrapper = angular.element('#loading_wrapper');
Note: Make sure whether font-awesome css files installed or not. Otherwise, you can use simply bootstrap components.
I have layout where I have:
<li ng-click="GetLoader();">ACCOUNT</li>
<li ng-click="GetLoader();">SETTINGS</li>
On the index page, I have a menu and ng-view where I can change pages on a click
Also included on the index page is a spinner.
<div class="loading" ng-show="ticketloading" ng-init="GetLoader()">
<div>
<img class="spinner" ng-src="~/Images/ajax-loader.gif" />
</div>
</div>
In my script I have -
$scope.GetLoader = function() {
$scope.ticketloading = true;
loader.css("z-index", "1");
}
My problem is that when a user clicks on "Account" it gets loaded, but just for few milliseconds. Then it changes to all blank. I receive data from ng-view. My question is how can I delay showing ng-view to show the loader a little bit longer.
Thanx in advance!
First of all you should avoid using DOM manipulations in controller. In your case it's better to use declarative ngClass directive to set opacity.
Then your actual issue is that you don't want to use static setTimeout to hide loaded, but rather listen $routeChangeSuccess:
$rootScope.$on('$routeChangeSuccess', function() {
$rootScope.ticketloading = false;
});
and use this loading flag in template like you are currently doing.
You can put above event listener in run block for example.
You can add property in your controller, for example dataLoading and add ng-if attribute to ng-view like this:
layout
<div ng-view ng-if="!dataLoading">
controller
function loadData()
{
var self = this;
self.dataLoading = true;
dataService.loadData(params, function(){
...
self.dataLoading = false;
});
}
Trying to get angular to render a list of directives after a drop-down is toggled in bootstrap.
Ideally, I'll $scope in the main view Ctrl:
$scope.directiveList = ['messages', 'events', 'cart'];
and in the html
<div ng-repeat="directive in directive-list">
<{{directive}}/>
</div>
the results i'm getting are plain text, i.e. . I've tried to modify another helper directive I learned that renders normal html elements fine but doesn't render custom expressions. Here's that directive code:
.directive("notify", function(){
return {
restrict:"EA",
scope:{element:"="},
link:function(scope, iElem) {
var domElement = document.createElement(scope.element);
iElem.append(domElement);
}
};
});
This code renders the element in plain text as well tho it doesn't show in the view. Any help, as always, is much appreciated! Thanks in advance!
My Web page has the following tag:
<div data-ng-model="modal.data.message"></div>
Is there a simple way using that I can make a message "autosaving" fade into view in the <div> and then fade out a couple of seconds after the function returns.
Add the ngShow directive to your div:
<div ng-model="message" ng-show="showMessage" class="message fadein fadeout">{{message}}</div>
When saving begins set showMessage = true and the message you want to display. When saving is done set showMessage = false. To show the message a while longer after the saving is done you can use $timeout:
// Loadind done here - Show message for 3 more seconds.
$timeout(function() {
$scope.showMessage = false;
}, 3000);
The animation part depends on what version of AngularJS you are using.
Here is an example using 1.2: http://plnkr.co/edit/jBukeP?p=preview