I need to access the current form (which may be nested) from within an angularjs directive. I know I can use
require: 'form'
or
require: '^form'
to go up a level but what if the directive I'm designing can live 1 level deep on one form and three levels deep on another?
require: '^form' or require: '^^^form' etc
How can I design my directive to require the nearest form to it?
Thanks!
It doesn't matter how far down the directive is nested. It will search up until it finds an ancestor with that controller, or it will throw an error.
So if you have a directive like this:
app.directive("formSpice", function () {
return {
restrict: "A",
require: "^form",
scope: {},
link: function (scope, element, attrs, ctrl) {
scope.formName = ctrl.$name;
}
};
});
And a your markup looks like this:
<form name="myForm">
<div class="well" form-spice>
<h3>Level 1 - Form Name: {{formName}}</h3>
<div class="well" form-spice>
<h3>Level 2 - Form Name: {{formName}}</h3>
<div class="well" form-spice>
<h3>Level 3 - Form Name: {{formName}}</h3>
</div>
</div>
</div>
</form>
It will still find the form in all three instances.
Live Demo
Related
The generateLegend() wrapper does call the legendCallback defined in my Vue code but I'm lost to how to render the custom HTML in vue-chartjs. What do I do with htmlLegend as described in the vue-chartjs api docs like here.
Here is the line chart component I'm trying to render with a custom HTML object.
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['chartData','options'],
data: () => ({
htmlLegend: null
}),
mounted () {
this.renderChart(this.chartData, this.options);
this.htmlLegend = this.generateLegend();
}
}
Here is my vue template
<template>
<div class="col-8">
<line-chart :chart-data="datacollection" :options="chartOptions"></line-chart>
</div>
</template>
Well, htmlLegend holds the markup of the generated legend... so you can just put it into your tag via v-html
<template>
<div class="col-8">
<div class="your-legend" v-html="htmlLegend" />
<line-chart :chart-data="datacollection" :options="chartOptions"></line-chart>
</div>
</template>
mounted() {
this.renderChart( this.chartData , this.options );
var legend = this.generateLegend();
this.$emit('sendLegend', legend)
}
and then in the vue file add a new div to show the legend and also listen to the event to get the legend data
<div class="line-legend" v-html="chartLegend"></div>
<line-chart #sendLegend="setLegend" :chart-data="datacollection" :options="chartOptions"></line-chart>
and also add this to the data
chartLegend: null,
and you also need a method
setLegend (html) {
this.chartLegend = html
},
Good Day,
I'm trying to create a simple search function using the easy search package.
In a nutshell I have done the following-
Defined a schema and index on the client as such:
const Patients = new Mongo.Collection('patients');
const PatientsIndex = new EasySearch.Index({
collection: Patients,
fields: ['name'],
engine: new EasySearch.MongoDB()
});
I've entered the following values into the database:
meteor:PRIMARY> db.patients.find()
{ "_id" : ObjectId("57d6a9f71bad26ba07748f9d"), "name" : "Paul" }
Created a template helper on the client side:
Template.searchBox.helpers({
patientsIndex: () => PatientsIndex
});
And lastly I've created a template which should output the results:
<template name="searchBox">
{{> EasySearch.Input index=patientsIndex }}
<ul>
{{#EasySearch.Each index=patientsIndex }}
<li>Name of the patient: {{name}}</li>
{{/EasySearch.Each}}
</ul>
</template>
Now for some reason this just wont work, it renders nothing to the template, I' very new to this and would really appreciate some assistance.
Thanking you.
From your code samples it looks like you're trying to refer to both Patients and PatientsIndex globally. Assuming you have your Patients and PatientsIndex declarations in a shared client/server location (like /lib), then you should remove the const keyword. That will make sure these declarations are available globally, and will allow your Template to use them. Here's a modified version of your code that will work:
/lib/collection.js
Patients = new Mongo.Collection('patients');
PatientsIndex = new EasySearch.Index({
collection: Patients,
fields: ['name'],
engine: new EasySearch.MongoDB()
});
/client/main.html
<body>
{{> searchBox}}
</body>
<template name="searchBox">
{{> EasySearch.Input index=patientsIndex }}
<ul>
{{#EasySearch.Each index=patientsIndex }}
<li>Name of the patient: {{name}}</li>
{{/EasySearch.Each}}
</ul>
</template>
/client/main.js
import { Template } from 'meteor/templating';
import './main.html';
Template.searchBox.helpers({
patientsIndex() {
return PatientsIndex;
}
});
new to Symfony and trying to understand something. I have index.twig.html and in it, I have a form
<form action="{{ path('SpecialAlertBundle_add') }}" method="post" enctype="multipart/form-data" class="addAlertForm">
<textarea class="addMargin" id="na_command" name="na_command" rows="3" cols="50" placeholder="A20APRLONLAX"></textarea>
<button type="button" class="btn btn-default" id="submit_alert" name="submit_alert">Submit</button>
{{ name }}
</form>
I wont add all the html, but its a normal form, not using Form Builder.
I have a route set up
SpecialAlertBundle_add:
pattern: /
defaults: { _controller: SpecialAlertBundle:Alert:add }
requirements:
_method: GET|POST
So that route displays my form ok when I go to localhost:8000. It also states which controller to use. As for the controller, I have
class AlertController extends Controller
{
public function addAction()
{
$request = $this->get('request_stack')->getCurrentRequest();
if ($request->request->has('submit_alert')) {
$name = $request->request->get('na_command');
} else {
$name = 'Not submitted yet';
}
return $this->render('SpecialAlertBundle:Page:index.html.twig', array(
'name' => $name
));
}
}
The first thing I want to clear up is that return in the controller. Is this the view I want it to render AFTER the form has been submitted?
Second thing is, at the moment, The {{name}} in the template is always displaying Not submitted yet. Even when I submit the form with data, nothing seems to happen. It seems that the button is doing nothing. Even when I look in the debug console, I see no request being made.
So I was hoping someone could advise me on what I am doing wrong here?
Thanks
First of all why don't you use Request directly in controller instead of request_stack? Request stack is mostly for injecting it to service (and not to inject request to the service).
So, you can do something like this:
public function addAction(Request $request)
{}
Then I'd suggest you to separate get request and post request. Just define two different routes.
For example:
SpecialAlertBundle_add:
pattern: /
defaults: { _controller: SpecialAlertBundle:Alert:add }
requirements:
_method: GET
SpecialAlertBundle_create:
pattern: /
defaults: { _controller: SpecialAlertBundle:Alert:create }
requirements:
_method: POST
After this you will have to change your form action value: set it to 'SpecialAlertBundle_create'
And it will be cleaner which one is now. After that you just don't need the checking on existence of 'submit_alert' property in request. You can assign the value of 'na_command' field to the $name:
$name = $request->get('na_command');
I am facing a strange error while adding the facebook comment plugin in my AngularJS app.
The simplified structure of the app page is
<html ng-app="myapp">
<head>
...
</head>
<body>
<div>
...
</div>
<div ng-view></div>
...
</body>
</html>
The page with fb comment box is loaded in ng-view. The structure of page that contains fb comment box is as follows
<div id="fb-comment-box>
<div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"></div>
</div>
The page is angularjs scope variable which comes from controller. When i load this page in browser and do inspect element. It shows the correct page id i.e. data-href is
data-href = "http://mydomain.com/page/2"
But below the fb comment box, Facebook shows following error
Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is
unreachable.
I can see the angularJS scope variable is not binding. Does anyone know how to solve this issue?
This is probably due to the fact that the FB functionality kicks in before Angular is able to change the data-href attribute.
A directive seems like a good choice here:
You basically need to create the comment-box after Angular can provide the correct URL.
Because this involves asynchronous DOM manipulation, you need to use FB.XFBML.parse() to let FB process the comment-box once the data-href attribute is changed.
The directive:
.directive('dynFbCommentBox', function () {
function createHTML(href, numposts, colorscheme) {
return '<div class="fb-comments" ' +
'data-href="' + href + '" ' +
'data-numposts="' + numposts + '" ' +
'data-colorsheme="' + colorscheme + '">' +
'</div>';
}
return {
restrict: 'A',
scope: {},
link: function postLink(scope, elem, attrs) {
attrs.$observe('pageHref', function (newValue) {
var href = newValue;
var numposts = attrs.numposts || 5;
var colorscheme = attrs.colorscheme || 'light';
elem.html(createHTML(href, numposts, colorscheme));
FB.XFBML.parse(elem[0]);
});
}
};
});
The HTML:
<div id="fb-comment-box" dyn-fb-comment-box
page-href="https://example.com/page/{{page.id}}"
numposts="5"
colorscheme="light">
</div>
NOTE:
The directive's scope will constantly watch for changes in the page-href attribute and update the comment-box. You can change this to suit your needs (e.g. also watch for changes in the other attributes or bind it once and stop watching).
See, also, this short demo.
Imagine this scenario: in our company there is an employee that "play" around graphic,css,html and so on.
Our new project will born under symfony2 so we're trying some silly - but "real" - stuff (like authentication from db, submit data from a form and persist it to db and so on..)
The problem
As far i know, learnt from symfony2 "book" that i found on the site (you can find it here), there is an "automated" way for creating and rendering forms:
1) Build the form up into a controller in this way
$form = $this->createFormBuilder($task)
->add('task','text'),
->add('dueDate','date'),
->getForm();
return $this->render('pathToBundle:Controller:templateTwig',
array('form'=>$form->createview());
2) Into templateTwig render the template
{{ form_widget(form) }} // or single rows method
3) Into a controller (the same that have a route where you can submit data), take back submitted information
if($rquest->getMethod()=='POST'){
$form->bindRequest($request);
/* and so on */
}
Return to scenario
Our graphic employee don't want to access controllers, write php and other stuff like those. So he'll write a twig template with a "unconventional" (from symfony2 point of view, but conventional from HTML point of view) method:
/* into twig template */
<form action="{{ path('SestanteUserBundle_homepage') }}" method="post" name="userForm">
<div>
USERNAME: <input type="text" name="user_name" value="{{ user.username}}"/>
</div>
<div>
EMAIL: <input type="text" name="user_mail" value="{{ user.email }}"/>
</div>
<input type="hidden" name="user_id" value="{{ id }}" />
<input type="submit" value="modifica i dati">
</form>
Now, if into the controller that handle the submission of data we do something like that
public function indexAction(Request $request)
{
if($request->getMethod() == 'POST'){ // sono arrivato per via di un submit, quindi devo modificare i dati prima di farli vedere a video
$defaultData = array('message'=>'ho visto questa cosa in esempio, ma non capisco se posso farne a meno');
$form = $this->createFormBuilder($defaultData)
->add('user_name','text')
->add('user_mail','email')
->add('user_id','integer')
->getForm();
$form->bindRequest($request); //bindo la form ad una request
$data = $form->getData(); //mi aspetto un'array chiave=>valore
/* .... */
We expected that $data will contain an array with key,value from the submitted form.
We found that it isn't true. After googling for a while and try with other "bad" ideas, we're frozen into that.
So, if you have a "graphic office" that can't handle directly php code, how can we interface from form(s) to controller(s) ?
UPDATE
It seems that Symfony2 use a different convention for form's field name and lookup once you've submitted that.
In particular, if my form's name is addUser and a field is named userName, the field's name will be AddUser[username] so maybe it have a "dynamic" lookup method that will extract form's name, field's name, concat them and lookup for values.
Is it possible?
You can force Symfony2 to set the name of a form field, though I don't suggest it: $formBuilder->add('dummyfield', 'text', array( 'attr' => array('name' => 'yournamehere') ) );
Alternatively (also a bad idea), you can do this, which won't even let you use the form API: $this->getRequest()->get('whatever_the_field_name_is');
OR you can hackily add elements to the request based on the Sf2 generated names before binding it (copying the values that exist).
OR you can make use of the bind method of the form component (instead of bindRequest) as documented here.
But seriously...just use the formbuilder api. Your life will be easier, and isn't that what a framework is for? :)
Symfony 2 is based on twig as templating language. Let him use it :
{{ form_label(form.field) }}
will generate something like this :
<label for="field">field</label>
You can use all the available functions in order to render the form :
{{ form_label() }}
{{ form_widget() }}
{{ form_errors() }}
If you want to customize what is rendered by those functions, you can override twig templates as defined in the Symfony2 documentation.
Otherwise if you really want to something ugly, you can go for this kind of syntax :
{{ myform.vars.value.myField }}