I'm trying to display text fields (like a form) inside a table. I got a button, when I click it one new line is added to the table and all the cells are form fields. When I click the button one new line appears (that's ok), but, the html code for the fields is showing up like text. I''ve tryed to render as html but it doesn't work:
1.Render text as html with angularJs
2.AngularJS : Insert HTML into view
3.http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/editing-text-in-place-using-html5-content-editable.html]
I've done an index.html which provides 3 routes to he diferent views. The index file is what contains all angular sripts and my own scripts. I'm looking for the easiest way. This is the first time I work with angular.
index.html:
<html ng-app="assets">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="sources/js/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
<script>
var assets = angular.module('assets', ['ngRoute']);
assets.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html'
}).
when('/:tipusactius', {
templateUrl: 'tipusactius.html',
controller: 'TipusActiusCtrl'
}).
when('/:tipusactius/alta', {
templateUrl: 'tipusactius-alta.html',
controller: 'AfegirTipusActiusCtrl'
}).
otherwise({
redirectTo: '/'
});
});
assets.controller('TipusActiusCtrl', function ($scope, $http){
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/').success(function(data) {
$scope.tipus_actius = data;
});
// Ordena taula per id desc
$scope.sortField = 'idtipus_actius';
$scope.reverse = false;
});
assets.controller('AfegirTipusActiusCtrl', function ($scope, $http, $sce){
$scope.renderHTML = "<input type='text' name='firstname'>";
// Camps formulari text pla
$scope.nomAtribut = "<input type='text' name='firstname'>";
$scope.tipus = "<input type='text' name='firstname'>";
$scope.mida = "<input type='text' name='firstname'>";
$scope.prioritat = "<input type='text' name='firstname'>";
$scope.obligatori = "<input type='text' name='firstname'>";
$scope.atributs = [];
$scope.addField = function() {
$scope.atributs.push($scope.atributs.length);
};
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-view></div>
</body>
</html>
tipusactius-alta.html:
<script>
</script>
<div class="row">
<div class="col-md-8" ng-controller="AfegirTipusActiusCtrl">
<button ng-click="addField()">Nou atribut</button>
<div class="col-md-8">
<table class="table">
<tr>
<td>Nom atribut</td>
<td>Tipus</td>
<td>Mida</td>
<td>Prioritat</td>
<td>Obligatori</td>
</tr>
<tr ng-repeat="atribut in atributs">
<td>{{nomAtribut}}</td>
<td>{{tipus}}</td>
<td>{{mida}}</td>
<td>{{prioritat}}</td>
<td>{{obligatori}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
I wasted all my morning with this thing. This is the code without the Html render tests. Any help will be helpful.
Solved:
Finally I did it like #Ankh told me:
The text needs to be compiled as html by Angular for it to render
properly. Try creating a 'compile' directive. That will call $compile
on any text passed into it..
assets.directive('compile', compile);
function compile($compile)
{
return {
restrict: 'A',
replace: true,
link: linkFunction
};
function linkFunction(scope, element, attrs)
{
scope.$watch(
function (scope)
{
return scope.$eval(attrs.compile);
},
function (value)
{
element.html(value);
$compile(element.contents())(scope);
}
);
}
} .. and in your template
<tr ng-repeat="atribut in atributs">
<td compile="nomAtribut"></td>
<td compile="tipus"></td>
<td compile="mida"></td>
<td compile="prioritat"></td>
<td compile="obligatori"></td>
</tr>
The text needs to be compiled as html by Angular for it to render properly. Try creating a 'compile' directive. That will call $compile on any text passed into it..
assets.directive('compile', compile);
function compile($compile)
{
return {
restrict: 'A',
replace: true,
link: linkFunction
};
function linkFunction(scope, element, attrs)
{
scope.$watch(
function (scope)
{
return scope.$eval(attrs.compile);
},
function (value)
{
element.html(value);
$compile(element.contents())(scope);
}
);
}
}
.. and in your template
<tr ng-repeat="atribut in atributs">
<td compile="nomAtribut"></td>
<td compile="tipus"></td>
<td compile="mida"></td>
<td compile="prioritat"></td>
<td compile="obligatori"></td>
</tr>
Related
ModalInstance data is getting NULL in importing controller.
I have changed modelInstance name also.But dint work out.
here am adding my code,
SaveController.js
scope.open = function (_data) { //data is present
var modalInstanceData = modal.open({
controller: "PopUpController",
templateUrl: 'myModalContent.html',
resolve: {
data: function()
{
return _data; // values are present here
}
}
});
};
PopUpController.js
angular.module('user').controller('PopUpController',
['$scope','$state','$uibModalInstance',
function(scope,state,modalInstanceData,data) {
data={};
scope.data = data;
farmBid.produceValue = scope.data.produceId; //value is present here
}])
Html
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
<input type="text" name="produceValue" ng-model="farmBid.produceValue" />
<!-- But here its not prefilling the data-->
<input type="submit" ng-click="generate(farmBid)">
</div>
</script>
Modal data values are not being visible in HTML page
Please help
You should pass the parameters in right order and should match, you are missing 'data'
angular.module('user').controller('PopUpController',
['$scope','$state','$uibModalInstance','data',
function(scope,state,modalInstanceData,data) {
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>
edit
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;
}]);
I'm trying to get the height of elements in a simple AngularJS app.
See below. What am I doing wrong? The height should be different as the lines wrap, but I get 20 reported back to me regardless of what I input in the "labels" array.
The following code can be executed here, otherwise see below.
http://js.do/code/49177
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>height of element in angularjs</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
'use strict';
var app = angular.module('heightApp', ['ngRoute', 'routing']);
app.controller('heightCtrl', ['$scope', function ($scope) {
$scope.labels = [
'Hi there, I\'m a div.',
'Me too, I\'m also a div.',
'Can you see me, because I certainly can\'t see myself. I don\'t even know my own height. Isn\'t that just crazy?'
];
}]);
angular.module('routing', []).config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'height.html',
controller: 'heightCtrl'
});
}]);
angular.module('heightApp').directive('reportMyHeight', function() {
return function (scope, el, attrs) {
alert('offsetHeight = ' + el[0].offsetHeight);
}
})
</script>
</head>
<body ng-app="heightApp">
<div class="container">
<div ng-view></div>
</div>
</body>
<script type="text/ng-template" id="height.html">
<div class="row">
<div class="col-sm-4" report-my-height ng-repeat="lbl in labels">
{{ ::lbl }}
</div>
</div>
</script>
</html>
You need to wait till the next digest cycle. When you do it right away in the directive the interpolations {{ ::lbl }} inside the ng-repeat would not have expanded yet. You can place it in a $timeout turning off the applyDigest argument.
i.e, example:
angular.module('heightApp').directive('reportMyHeight', function($timeout) {
return function (scope, el, attrs) {
$timeout(init, false);
//Initialization
function init(){
console.log('offsetHeight = ' + el[0].offsetHeight, el.html());
}
}
});
Plnkr
Another way to make sure you get the height of the element is to use watch.
angular.module('heightApp').directive('reportMyHeight', function($timeout) {
return function (scope, el, attrs) {
scope.$watch('lbl', function(newval, oldval){
alert(newval + '\n\n' + 'offsetHeight = ' + el[0].offsetHeight);
});
}
})
It will only be triggered once since you use ::.
Plunker
There are a lot of files, so perhaps you Angular aficionados will understand my explanation, or be able to follow the plunker I've provided above.
I'm creating a demo to modularize a webpage. Even the main content of the page will be in another template file. In the main content view, there's a table of links, the link opens an angular-bootstrap modal (another template/controller), which displays additional information for the object clicked.
I'm finding that every time a link is clicked, the factory is retrieving the source data. For something small, it's unnoticeable, but if you're performing an AJAX request to a large dataset, or transforming an XML to JSON, this could take a while. I am uncertain if this is a result of routing, or if it's a poor implementation of what I'm trying to accomplish, but I would like to:
understand why this is happening
retrieve the initial data once and share it between controllers
data.json
[
{"firstName":"John",
"lastName":"Denohn",
"profession":"Student",
"age":10
},
{"firstName":"Mark",
"lastName":"Fatzigio",
"profession":"Doctor",
"age":20
},
{"firstName":"Jennifer",
"lastName":"Cooler",
"profession":null,
"age":30
},
{"firstName":"Kimberly",
"lastName":"Branch",
"profession":"Teacher",
"age":40
}
]
index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="myApp.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
</head>
<body>
<div data-ng-view="" data-ng-cloak ></div>
<script src="myApp.js"></script>
<script src="myAppModels.js"></script>
<script src="myAppControllers.js"></script>
</body>
</html>
template_initialPageView.html
<div class="page-container" data-ng-cloak>
<!-- Table Content -->
<table class="table" data-ng-cloak>
<thead>
<tr><th colspan="{{keysToShow.length}}"><h1>People</h1></th></tr>
<tr><th data-ng-repeat="header in keysToShow">{{ header.displayName }}</th></tr>
</thead>
<tbody>
<tr data-ng-repeat="person in people | orderBy:orderProp">
<td><a href="#{{[person.firstName, person.lastName].join('_')}}"
data-ng-click="showModal(person)"
>{{ [person.firstName, person.lastName].join(' ') }}</a></td>
<td>{{ person.profession }}</td>
</tr>
</tbody>
</table>
</div>
template_modalContentView.html
<div class="modal-header">
<button type="button" class="close" data-ng-click="cancelModal()">×</button>
<h3 class="modal-title" id="myModalLabel">Person Info</h3>
</div>
<div class="modal-body">
<tabset>
<tab heading="Age">
<h4>Name</h4>
<p>{{ person.firstName + ' ' + person.lastName }}</p>
<h4>Age</h4>
<pre>{{ person.age }}</pre>
</tab>
<tab heading="Profession">
<h4>Name</h4>
<p>{{ person.firstName + ' ' + person.lastName }}</p>
<h4>Profession</h4>
<pre>{{ person.profession }}</pre>
</tab>
</tabset>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="closeModal()">Close</button>
</div>
myApp.js
var myApp = angular.module('myApp', ['ui.bootstrap', 'ngRoute']);
/* Routes */
myApp.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'template_initialPageView.html',
controller: 'PageViewController',
controllerAs: 'page'
})
.otherwise({
redirectTo: '/home'
});
});
myAppControllers.js
var myAppControllers = {};
// Define: Page View Controller
myAppControllers.PageViewController = function ($scope, $modal, modelFactory) {
init();
function init(){
$scope.orderProp = '';
$scope.keysToShow = [{'displayName':'Fullname'},{'displayName':'Profession'}];
modelFactory.getPeople().success(function(data){
$scope.people = data;
});
}
$scope.showModal = function(person) {
console.log('person clicked', person);
$scope.person = person;
var modalInstance = $modal.open({
controller: 'ModalController',
controllerAs: 'modal',
templateUrl: 'template_modalContentView.html',
resolve: {
person: function(){
return $scope.person;
}
}
});
};
};
// Define: Modal Controller
myAppControllers.ModalController = function ($scope, $modalInstance, person) {
init();
function init(){
$scope.person = person;
}
$scope.cancelModal = function (){
$modalInstance.dismiss('cancel');
};
$scope.closeModal = function () {
$modalInstance.close();
};
};
// Add controlers to the module
myApp.controller(myAppControllers);
myAppModels.js
myApp.factory('modelFactory', function($http){
var factory = {};
factory.getPeople = function (){
return $http.get('data.json');
};
return factory;
});
You can try this, it initially returns an empty array that will be populated when $http.get() returns and it re-uses the array each time it is called:
myApp.factory('modelFactory', function($http){
var factory = {};
factory.getPeople = function () {
if (typeof(factory.people) == "undefined") {
factory.people = [];
$http.get('data.json').success(function(result) {
var i = 0;
for (i = 0; i < result.length; i++) {
factory.people.push(result[i]);
}
});
}
return factory.people;
};
return factory;
});
And don't forget to change your assignment to accept an array and just use that:
$scope.people = modelFactory.getPeople();
(PLUNKR)
After describing my setup, my questions are below in bold.
index.html
<div ng-controller="MyCtrl">
<user-picker placeholder="Type a name..."></user-picker>
</div>
Setup:
var app = angular.module('app', ['app.directives', 'app.controllers']);
var directives = angular.module('app.directives', []);
var ctrls = angular.module('app.controllers', []);
Controller:
ctrls.controller('MyCtrl', function($scope) {
$scope.foo = 'this is a foo';
});
Directive:
directives.directive('userPicker', function() {
return {
restrict: 'E',
replace: true,
scope: {
placeholder: '#'
},
templateUrl: 'file.html',
link: function postLink($scope, ele, attrs) {
console.log($scope);
console.log('[ng] Scope is: ');
console.log($scope.placeholder);
console.log($scope.$parent.foo);
}
});
file.html (the directive):
<span>
<input placeholder="{{placeholder}}" type="text">
</span>
So what I want to end up with, is generally working:
<span placeholder="Type a name...">
<input placeholder="Type a name..." type="text">
</span>
The placeholder attribute is correctly resolved.
Is this the right way to accomplish this? Note that the attribute ends up in two places.
Why this odd behavior:
Secondly, I am baffled by the results of console.log($scope). The console output reveals the accurately set placeholder attribtue on the $scope object. However, even still, the very next console.log($scope.placeholder) statement returns "undefined". How is this possible, when the console output clearly shows the attribute is set?
My goals are:
Move or copy the placeholder attribute from the parent down to the child <input> tag.
Have access to the template scope from within linking function.
Reference the parent MyCtrl controller that this directive sits within.
I was almost there, until I ran into the odd behavior noted above. Any thoughts are appreciated.
Instead of attempting to read this off the scope would reading the attrs work?
Some HTML
<script type="text/ng-template" id="file.html">
<span>
<input placeholder="{{placeholder}}" type="text"/>
</span>
</script>
<body ng-app="app">
<div ng-controller="MyCtrl">
<user-picker placeholder="Type a name..."></user-picker>
</div>
</body>
Some JS
var app = angular.module('app', ['app.directives', 'app.controllers']);
var directives = angular.module('app.directives', []);
var ctrls = angular.module('app.controllers', []);
ctrls.controller('MyCtrl', function ($scope) {
$scope.foo = 'this is a foo';
});
directives.directive('userPicker', function () {
return {
restrict: 'E',
replace: true,
scope: {
placeholder: '#'
},
templateUrl: 'file.html',
link: function postLink($scope, ele, attrs) {
console.log($scope);
console.log('[ng] Scope is: ');
console.log(attrs["placeholder"]);
console.log($scope.$parent.foo);
}
}
});
A Fiddle
http://jsfiddle.net/Rfks8/