I will have an app with drag and drop functionality.
Also, it will be possible to drop an ckeditor in it.
How is it possible to create a new instance of an ckeditor, the Problem i have is all the instances will have the same "ng-model".
I saw an Answer with "ng-repeat" here:
jsfiddle.net/TheSharpieOne/cPTr7/
but my app does not have such an repeater.
Thank you
Had similar problem, don't know if this can help you, but solved my problem.
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('pasteState', function () {
$scope.$apply(function () {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
};
}
};
}])
function myCtrl($scope){
$scope.ckEditors = [];
$scope.post = 0;
$scope.addEditor = function(id){
$scope.ckEditors.pop();
$scope.post=id;
var rand = ""+(Math.random() * 10000);
$scope.ckEditors.push({value:rand});
}
}
<script src="http://ckeditor.com/apps/ckeditor/4.2/ckeditor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="myCtrl">
<h3>Post1:</h3>
<div ng-repeat="editor in ckEditors">
<textarea ng-if="post==1" data-ng-model="editor.value" data-ck-editor></textarea>
<br />
</div>
<button ng-click="addEditor(1)">New Editor</button>
<h3>Post2:</h3>
<div ng-repeat="editor in ckEditors" >
<textarea ng-if="post==2" data-ng-model="editor.value" data-ck-editor></textarea>
<br />
</div>
<button ng-click="addEditor(2)">New Editor</button>
http://jsfiddle.net/PauloSegundo/mrLz8eba/
Related
In angularjs if i change or remove image it does not make any changes. After refreshing the page it show the changed image.I am using following line to remove image
jQuery
$('#profile_image').val('')
This Sample is basic if you want to know more about AngularJs click on link
var app = angular.module("app", []);
app.controller("ctrl", [
"$scope",
function($scope) {
$scope.imgShow = true;
$scope.imgSrc = "https://www.gravatar.com/avatar/75025ad9a8cfdaa5772545e6e8f41133?s=32&d=identicon&r=PG&f=1";
$scope.display = function() {
$scope.imgShow = true;
$scope.imgSrc = "https://www.gravatar.com/avatar/75025ad9a8cfdaa5772545e6e8f41133?s=32&d=identicon&r=PG&f=1";
}
$scope.change = function() {
$scope.imgSrc = "https://www.gravatar.com/avatar/fccd71b79b3571b459cdfe40e7bf5dd8?s=32&d=identicon&r=PG&f=1";
}
$scope.remove = function() {
$scope.imgShow = false;
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<img ng-src="{{imgSrc}}" ng-show="imgShow">
<hr/>
<button ng-click="display()" ng-hide="imgShow">display image</button>
<button ng-click="change()">change image</button>
<button ng-click="remove()">remove image</button>
</div>
If you want to manipulate the DOM in AngularJS you should use directives for this purpose.
You should avoid using jquery inside of your controllers and simply work with your model. Below is fileUpload directive that could help you to work with <input type="file"> in a more angularjs-way:
angular.module('myApp', [])
.controller('TestController', ['$scope', function ($scope) {
var ctrl = this;
ctrl.imageFile = null;
ctrl.clearFile = clearFile;
function clearFile(){
ctrl.imageFile = null;
}
$scope.$ctrl = ctrl;
}])
.directive('fileUpload', [function () {
return {
require: "ngModel",
restrict: 'A',
link: function ($scope, el, attrs, ngModel) {
function onChange (event) {
//update bindings with $applyAsync
$scope.$applyAsync(function(){
ngModel.$setViewValue(event.target.files[0]);
});
}
//change event handler
el.on('change', onChange);
//set up a $watch for the ngModel.$viewValue
$scope.$watch(function () {
return ngModel.$viewValue;
}, function (value) {
//clear input value if model was cleared
if (!value) {
el.val("");
}
});
//remove change event handler on $destroy
$scope.$on('$destroy', function(){
el.off('change', onChange);
});
}
};
}]);
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.20/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="TestController">
<input type="file" file-upload ng-model="$ctrl.imageFile" />
<input type="button" ng-click="$ctrl.clearFile()" value="Reset" />
<div ng-if="$ctrl.imageFile">
{{$ctrl.imageFile.name}}<br />
{{$ctrl.imageFile.size}} byte(s)<br/>
{{$ctrl.imageFile.type}}
</div>
</div>
</div>
UPDATE: Also take a look at this useful reading.
How in controller can I call function clearCopy from directive?
This is part of my html:
<tr ng-form="mForm" my-directive>
<td>
<div>
<button class="btn btn-default" ng-click="saveData(row)"> </button>
</div>
</td>
</tr>
This is my Directive:
angular.module("w.forms").directive("myDirective", function () {
return {
require: ["^form"],
link: function (scope, element, attrs, ctrls) {
scope.$watch(function () {
// ...... something
}, true);
scope.clearCopy = function () {
// do something
}
}
};
});
This is my Controller:
angular.module("app").controller("datalesController", function ($scope) {
$scope.saveData(row) = function {
// do something then run function from directive
// till this part everything works fine
$scope.clearCopy() // unfortunately it doesn't work :(
}
}
Everything works fine, except function $scope.clearCopy() in controller doesn't work.
HTML
<html>
<script src="library/angular.min.js"></script>
<script src="practice.js"></script>
<head>
</head>
<body ng-app="app" ng-controller="datalesController">
<div my-directive>
<button ng-click="saveData()">press </button>
</div>
</body>
</html>
controller
angular.module('app',[]).controller("datalesController", function ($scope) {
$scope.saveData = function() {
// do something then run function from directive
// till this part everything works fine
$scope.clearCopy(); // unfortunately it doesn't work :(
};
});
Directive
angular.module('app',[]).directive("myDirective" , function () {
return {
restrict:'A',
link: function (scope, element, attrs, ctrls) {
scope.clearCopy = function () {
console.log("calling from controller");
};
}
};
});
I change your code for running your request
I'm trying to grab an ID attribute from the input field on change.
myApp.controller('OnChangeController', ['$scope', function($scope) {
$scope.Change = function(e) {
//alert(e);
$scope.output = e.$attr;
}
}]);
<div ng-controller="OnChangeController">
<input ng-model="change" id="ChangeID1" ng-change="Change(this)"> {{ output }}
<input ng-model="change" id="ChangeID2" ng-change="Change(this)"> {{ output }}
</div>
How to grab the element's ID attribute?
I wanted my ID, darn it :P
Here's nice, pointless, directive to get it.
I was writing code based on this example: http://jsfiddle.net/simpulton/E7xER/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script>
var firstApp = angular.module('firstApp', []);
firstApp.directive('myFirstApp', function() {
var variable = function(scope, element, attrs) {
var elemArray = element.children();
$.each(elemArray, function() {
$(this).on('click', function() {
var id = $(this).attr("id");
alert(id);
});
});
};
return {
restrict: 'AEC',
link: variable
};
});
</script>
</head>
<body ng-app="firstApp">
<my-first-app>
<button id="a1">button 1</button>
<button id="a2">button 2</button>
</my-first-app>
<br />
<my-first-app>
<button id="b1">button 1</button>
<button id="b2">button 2</button>
</my-first-app>
</body>
</html>
How do we highlight and select all content inside a element on click using Angular JS ?.
It is easy to do using inputbox. But how do we do for element.
Help would be appreciated.
Thank you
This is what I have used so far.
HTML
<div ng-controller="appController" ng-app="app">
<input type="text" ng-model="content" ng-click="onTextClick($event)" />
</div>
JS
var app = angular.module('app', []);
app.controller('appController',
function ($scope) {
$scope.content = 'test';
$scope.onTextClick = function ($event) {
$event.target.select();
};
});
http://jsfiddle.net/onury/R63u5/
jsfiddle: http://jsfiddle.net/n63LhtcL/3/
Here is an updated directive to achieve it:
.directive('selectOnClick', function ($window) {
return {
link: function (scope, element) {
element.on('click', function () {
var selection = $window.getSelection();
var range = document.createRange();
range.selectNodeContents(element[0]);
selection.removeAllRanges();
selection.addRange(range);
});
}
}
});
Your markup:
<div select-on-click>
Some text...
<input type="text" ng-model="content" />
</div>
What is the idiomatic way to get an elements siblings when it is clicked using AngularJS?
So far I've got this:
<div ng-controller="FooCtrl">
<div ng-click="clicked()">One</div>
<div ng-click="clicked()">Two</div>
<div ng-click="clicked()">Three</div>
</div>
<script>
function FooCtrl($scope){
$scope.clicked = function()
{
console.log("Clicked", this, arguments);
};
}
</script>
here's a jQuery implementation as a concrete example:
<div id="foo">
<div>One</div>
<div>two</div>
<div>three</div>
</div>
<script>
$(function(){
$('#foo div').on('click', function(){
$(this).siblings('div').removeClass('clicked');
$(this).addClass('clicked');
});
});
</script>
Use a directive, since you want to traverse the DOM:
app.directive('sibs', function() {
return {
link: function(scope, element, attrs) {
element.bind('click', function() {
element.parent().children().removeClass('clicked');
element.addClass('clicked');
})
},
}
});
<div sibs>One</div>
<div sibs>Two</div>
<div sibs>Three</div>
Note that jQuery is not required.
fiddle
Here is an angular version of the jQuery sample that you provided:
HTML:
<div ng-controller="FooCtrl">
<div ng-click="selected.item='One'"
ng-class="{clicked:selected.item=='One'}">One</div>
<div ng-click="selected.item='Two'"
ng-class="{clicked:selected.item=='Two'}">Two</div>
<div ng-click="selected.item='Three'"
ng-class="{clicked:selected.item=='Three'}">Three</div>
</div>
JS:
function FooCtrl($scope, $rootScope) {
$scope.selected = {
item:""
}
}
NOTE: You dont strictly need to access DOM for this. However if you still want to then you can write a simple directive. Something like below:
HTML:
<div ng-controller="FooCtrl">
<div ng-click="clicked()" get-siblings>One</div>
<div ng-click="clicked()" get-siblings>Two</div>
<div ng-click="clicked()" get-siblings>Three</div>
</div>
JS:
yourApp.directive('getSiblings', function() {
return {
scope: true,
link: function(scope,element,attrs){
scope.clicked = function () {
element.siblings('div').removeClass('clicked');
element.addClass('clicked');
}
}
}
});
fiddle
Following is a directive built exclusively with Angular grammar (borrowing from jqLite):
link: function(scope, iElement, iAttributes, controllers) {
var parentChildren,
mySiblings = [];
// add a marker to this element to distinguish it from its siblings
// this could be a lot more robust
iElement.attr('rsFindMySiblings', 'anchor');
// get my parent's children, it will include me!
parentChildren = iElement.parent().children();
// remove myself
scope.siblings = [];
for (var i=0; i < parentChildren.length; i++) {
var child = angular.element(parentChildren[i]);
var attr = child.attr('rsFindMySiblings');
if (!attr) {
scope.siblings.push({name: child[0].textContent});
}
}
}
Note that it uses a controller to store the results. See this plunker for a detailed example