I have this Angular JS directive for Google Places auto complete and it's working fine. My problem is that when I try it on a mobile browser like Google Chrome or Safari, well mobile, the pac item, .pac container doesn't allow me to click on the drop down. This is my directive:
angular.module('wtSharedUtil').directive('googleplace', [ function() {
return {
restrict: 'A',
require : '?ngModel',
link: function (scope, element, attrs, model) {
var options = {
};
scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
model.$setViewValue(element.val());
});
});
}
};
}]);
I found a jQuery solution, but it is not a good solution:
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
console.log('disabletap ready')
}
}, '.pac-container');
This is not ionic, it is just angular. I would like an angular solution.
How can I do that?
Related
I have following directive
var app = angular.module('TestApp', []);
app.directive('selectMultiple', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).find('select').material_select();
$(element).find("ul li").first().click(function() {
$(element).find("ul li:not(:first-child)").each(function(index) {
$(this).find("input[type=checkbox]").prop("checked", $(element).find("ul li").first().find("input[type=checkbox]").prop("checked"));
});
});
}
};
});
And I am also using dirpagination on same page, Its working , but when page changed, means DOM gets new elements, whatever written in directive is completely not working.
AM I missing any thing, I am new to angular so might be I'll be missing some things
Thanks
Followed by the article How do I hide the tabs in Ionic Framework, the hide-tabs directive works fine.
But it has some problem when nested view.
As you can see in the codepen http://codepen.io/WilsonFpz/pen/MaxaQR, when the user navigate from home->level1->level2,
the level2`s tabs show again, but the $root.hideTabs is false as printing out.
var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = value;
});
scope.$on('$destroy', function() {
$rootScope.hideTabs = false;
});
}
};
});
Please give me some hints. Thanks.
I use CKEditor in my AngularJS webapp. I defined the event pasteState to listen to text changes and copy it to my ng-model.
Today, I upgraded CKEditor from version 4.4.7 to 4.5.1 (the last one) and discovered that my pasteState event is never fired.
My directive with the change event:
appDrct.directive('ckEditor', function() {
return {
require: '?ngModel',
link: function($scope, $elm, attr, ngModel) {
var config = {
toolbar:[[ 'Bold', 'Italic', 'Underline', 'Strike', 'TextColor', 'FontSize', '-', 'JustifyLeft', 'JustifyRight' ]]
};
config.removeButtons = '';
config.fontSize_sizes = 'petit/12px;normal/14px;grand/16px;';
var ck = CKEDITOR.inline ($elm[0], config);
if (!ngModel) return;
//ck.on('pasteState', function() {
ck.on('change', function() {
console.log(ck.mode);
$scope.$apply(function() {
ngModel.$setViewValue(ck.getData() || '');
});
});
ngModel.$render = function (value) {
ck.setData(ngModel.$viewValue);
};
$scope.$on("$destroy",function() {
CKEDITOR.instances[ck.name].destroy();
});
}
};
});
You should listen to the following events:
dataReady, change, blur, saveSnapshot.
From source code of ng-ckeditor:
['dataReady', 'change', 'blur', 'saveSnapshot'].forEach(function(event) {
ckeditor.$on(event, function syncView() {
ngModel.$setViewValue(ckeditor.instance.getData() || '');
});
});
But, my suggestion is to reuse a project that already exists, if you find something wrong or that can be improved you may suggest a modification (pull request) and make reusable code.
In a brief search I found two good projects:
https://github.com/lemonde/angular-ckeditor
https://github.com/esvit/ng-ckeditor
EDIT:
If you really want a simple version, you can use this working demo:
var app = angular.module('app', []);
app.directive('ckEditor', [function () {
return {
require: '?ngModel',
link: function ($scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace(elm[0]);
ck.on('change', function() {
$scope.$apply(function () {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
};
$scope.$on("$destroy",function() {
ck.destroy();
});
}
};
}]);
There's no "pasteState" in the public API of CKEditor, so it seems weird trying to use something like that (what kind of relation can exists between content changes and state of Paste?)
It seems that you should use 'change' instead.
I have tried using k-content-editable and well as just the generic data-ng-disabled but neither of these worked. Looking at the documentation it's not even clear to me there is a way to disable the control.
You can do this by creating a custom directive:
.directive("kNgDisabled", function() {
return {
restrict: "A",
link: function(scope, element, attr) {
scope.$on("kendoWidgetCreated", function(e, widget) {
var value = scope.$eval(attr.kNgDisabled);
$(widget.body).attr("contenteditable", !value);
scope.$watch(attr.kNgDisabled, function(value) {
$(widget.body).attr("contenteditable", !value);
});
})
}
}
});
Then use it like this:
<textarea kendo-editor k-ng-disabled="disabled"></textarea>
Here is a live demo: http://dojo.telerik.com/#korchev/AdApu
Add following code in your Angular controller->
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
function myFocusFunction() {
$($('#keFinding').data().kendoEditor.body).attr('contenteditable', false);
}
Is it possible to apply two way binding to a <textarea></textarea> that has had TinyMCE applied to it for Rich Text Formatting.
I can't get it to work! I can get TinyMCE to load the content of my model, but when I update the text in TinyMCE, my model does not auto update!
Is there a way?
You can do this by creating your own directive.
What you need to do is to let your directive sync your model when something in the TinyMCE editor changes. I have not used TinyMCE, but Wysihtml5. I think you can remake this to use TinyMCE instead.
angular.module('directives').directive('wysihtml5', ['$timeout',
function ($timeout) {
return {
restrict: 'E',
require: 'ngModel',
template: "<textarea></textarea>", // A template you create as a HTML file (use templateURL) or something else...
link: function ($scope, $element, attrs, ngModel) {
// Find the textarea defined in your Template
var textarea = $element.find("textarea");
// When your model changes from the outside, use ngModel.$render to update the value in the textarea
ngModel.$render = function () {
textarea.val(ngModel.$viewValue);
};
// Create the editor itself, use TinyMCE in your case
var editor = new wysihtml5.Editor(textarea[0],
{
stylesheets: ["/style.css"],
parserRules: wysihtml5ParserRules,
toolbar: true,
autoLink: true,
useLineBreaks: false,
});
// Ensure editor is rendered before binding to the change event
$timeout(function () {
// On every change in the editor, get the value from the editor (textarea in case of Wysihtml5)
// and set your model
editor.on('change', function () {
var newValue = textarea.val();
if (!$scope.$$phase) {
$scope.$apply(function () {
ngModel.$setViewValue(newValue);
});
}
});
}, 500);
}
};
}]);
Then you can use the directive in your html page like this:
<wysihtml5 ng-model="model.text" />
Here's a link if you need more info on creating your own directive: http://docs.angularjs.org/guide/directive
Also compare the render function from the directive above to this render function from angular-ui-tinymce ( https://github.com/angular-ui/ui-tinymce )
ngModel.$render = function() {
if (!tinyInstance) {
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
tinyInstance.setContent(ngModel.$viewValue || '');
}
Plnkr: http://plnkr.co/edit/04AFkp?p=preview
However depending on the timing of the loading of your DOM you may need to set the priority on your directive upwards. :-)
Here is my solution using a custom angular directive.
You'll need to use jQuery with angularJS, TinyMCE 4 and their jQuery plugin.
myApp.directive('tinymce', function() {
return {
restrict: 'C',
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
element.tinymce({
setup: function (e) {
e.on("change", function() {
modelCtrl.$setViewValue(element.val());
scope.$apply();
}
}
});
}
}
}
Then in your HTML:
<textarea class="tinymce" ng-model="data"></textarea>
That's it, have fun.