I have this function in jQuery but I'm facing problem converting that into angularJs function:
$('p').each(function() {
$(this).html($(this).text().split(/([\.\?!])(?= )/).map(
function(v){return '<span class=sentence>'+v+'</span>'}
));
It would really help if someone could explain to me how one would implement these lines of code in angularJs
Thanks in advance guys
easiest way is just splitting into an array and binding that to your controller.
More in depth way would be to roll your own custom directive, let me know if you want to see a way with a directive
<html ng-app="MyCoolApp">
<head>
</head>
<body ng-controller="MyCoolController">
<p ng-repeat="text in Array">
{{text}}
</P>
</body>
</html>
<script type="text/javascript">
var myApp = angular.module('MyCoolApp',[]);
myApp.controller('MyCoolController', ['$scope', function($scope) {
var dataSource = [];//your data split
$scope.Array = dataSource;
}]);
</script>
Updated to use custom directive. YOu will need to tweak the regEx to split properly plunkr example
split.html
<div>
<textarea ng-model="input"></textarea>
<button ng-click="Process(input)">Process</button>
<p>
<span style="border:1px solid red" ng-repeat="text in Output track by $index">
{{text}}
</span>
</p>
</div>
script.js
(function(angular) {
'use strict';
angular.module('splitExample', [])
.directive('mySplit', function() {
return {
templateUrl: 'split.html',
controller: function($scope){
$scope.Process = function(text){
$scope.Output = text.split(/([\.\?!])(?= )/);
console.log(text)
}
}
};
})
})(window.angular);
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-directive-tabs-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="splitExample">
<my-split>
</my-split>
</body>
</html>
You need to write a directive for it, DOM Manipulation is only allowed in directives in the link function otherwise it is a very bad practice. Here is the code inside link function of directive.
link: function (scope, element, attributes) {
var el= $(element);
el.find('p').each(function(){
el.html(el.text().split(/([\.\?!])(?= )/).map(
function(value){
return '<span class=sentence>'+value+'</span>'
}
));
});
}
Hope it helps you, I am unable to know actually what you are trying to do.. otherwise i would have helped you with full solution and proper directive approach, for any further assistance let me know. Thanks.
Just giving my suggestion : JQuery approach is incompatible with AngularJS.
Updated directive as per your requirement:
angular.module('yourAppModuleName').directive('contentClick', ['$timeout', function($timeout) {
return {
restrict: 'A',
require: 'ngModel',
scope: {
contentEditable: '=contentEditable'
},
link: function(scope, element, attributes) {
scope.$watch(attributes.contentEditable, function(value) {
if (value === undefined)
return;
scope.contentEditable = attributes.contentEditable;
});
if(scope.contentEditable == 'true') {
scope.$watch(attributes.ngModel, function(value) {
if (value === undefined)
return;
value.split(/([\.\?!])(?= )/).map(
function(v){
return '<span onclick="myFunction(this)" >'+v+'</span>'
}
);
});
}
//without timeout
//function myFunction(x) {
// x.style.background="#000000";
//}
//with timeout
function myFunction(x) {
$timeout(function() {
x.style.background = "green";
}, 10000);
}
}
};
}]);
HTML:
<div contentEditable="isEditable" style="cursor:pointer" ng-model="content" content-click></div>
Controller:
yourAppModuleName.controller('myController', ['$scope', function($scope) {
$scope.isEditable = true;
$scope.content;
}]);
<div contentEditable="true" onclick="myFunction(this)" style="cursor:pointer"></div> <script> function myFunction(x) { x.style.background="#000000"; } </script> You can setTimeout also if you want background color change should visible for few minutes function myFunction(x) { setTimeout(function(){ x.style.background = "yellow"; }, 10000); } here i have given timeout of 1 minute