I have a shell file called ajaxshell.html. This has an AngularJS app that loads another page called entrypage.html and renders that as HTML using $sce.
In entrypage.html I would like to use Angular for validation purposes - checking that certain fields have been edited, for example. However, entrypage.html simply cannot seem to find Angular(tested by using a simple ng-repeat) no matter which of the 2 pages I include it in.
How can I access Angular from within entrypage.html?
I would have entrypage.html brought in as the template for a directive, rather than a welded-in piece of HTML. If you need the URL to be dynamic, you can assign a function to templateUrl when declaring a directive, and it can put together the URL on-the-fly for you. Angular will then consider the page to be a valid component of itself.
Related
I am doing some development in moodle 3.7 for a new admin tool plugin. In this plugin I am generating a page from a custom made .mustache template. This template contains a number of values that are defined and managed within it, that I want to access within my .php file once a submit button is pressed.
Currently however I am unable to access these submitted values that are defined within the template. I can see their values in debugging under $form->_form->_submitValues but I cannot get to them due to _form being a protected variable of $form. I called $form->get_data(), but that only gave me access to the elements that I defined in php as non html elements (hidden for example), not in the template. I'm not sure if this is the right place to ask this question, but if anyone has any help they could give me on a path forward it would be much appreciated.
I am adding the template to the page using the function:
$mform->addElement(
'html',
$OUTPUT->render_from_template(PLUGIN_TOOL_NAME/members', $rendercontext)
);
Please let me know any other information you may need.
Any variables that you want to have access to must be defined in the mform using these functions:
$mform->addElement('hidden', 'VARIABLE_NAME');
$mform->setType('VARIABLE_NAME', PARAM_INT);
Any JavaScript that needs to update these values must be in a separate .js file, not in your template. If the JavaScript works in your mustache file, it will still do exactly the same thing if you put it in a different .js file, as long as that .js file is included on the page.
One thing to note: if you use the functions I defined above, the variable will not have an ID. instead it will have a name equal to whatever you put as VARIABLE_NAME. This means however that you cannot use document.getElementByID() to get the instance of your variable. instead you will have to use document.getElementsByName("VARIABLE_NAME")[0] to get access to your element.
If both of these things are done than you should see the value update and be sent to your mform on submit within the $data variable.
I am dynamically loading the html content from an ajax request. This html has some buttons like
<button #click="someComponentMethod">Add</button>
As you can see I am trying to call components methods. But Its not working.
I think instead of #click html's default attribute "onclick" should work. But this will only recognize the function that are defined in global scope. Can someone guide me how I can call component's function from core javascript i.e using "onclick".
Update
Ok! I got it that v-html will not compile that html. But can you guys tell me how can I call component method from javascript (i.e outside of component scope). In this way I will be able to use onclick="JAVASCRIPT_CODE_TO_EXECUTE_METHOD".
That content will not be compiled as mentioned in official docs :
The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
Instead of loading html I end up saving component in JSON format. This component has a template property that stores the html string. In this way I am able to store and load component to and from database and it works without any issue.
I am using an angular wizard for my app's registration process.
Angular Wizard -
https://github.com/mgonto/angular-wizard
However, no matter what I try, each step of the wizard is not allowing for form validation (which basically comes out of the box with angular and the use of forms with the FormController and the $error object.
I have posted on the project's issues page regarding form validation, but I have not heard from the owner of the project or from any other users with examples of working code, so I'm hoping some more advanced users here can help.
Oh and to help isolate the problem, I have only included the html for the first step in my jsfiddles.
Validation Issue - https://github.com/mgonto/angular-wizard/issues/41
The validation issue page links to my jsfiddles and other efforts.
Is this a scoping problem???? If so, how do I get around it? Currently when I click the Next button, it just progresses through the wizard, and when I try to send the $error object to the console, all I get is "undefined".
Angular docs (form properties and reference to $error) - https://docs.angularjs.org/api/ng/type/form.FormController
It's definitely a scoping problem. I was able to get things to work by reaching into the scope of a child element (in the controller) and by defining the variables in the view (html) as being part of the $parent element. This means that all of the variables are set in HTML as
ng-model="$parent.variableName";
Changing this variable's value from the controller requires a call as follows:
$scope.$$childTail.variableName = 'something that you want to change the value to';
But reaching into $$childTail is a no-no. This whole project needs to be reworked to fix the scoping problem if you ask me. And there needs to be documentation on how to access validation variables if the revised project uses anything outside of typical angular data binding.
My solution code is attached in gists, below.
Controller Setup
https://gist.github.com/Shawful/a4f8ff5097eabc5306f4
HTML Setup
https://gist.github.com/Shawful/f8dc97d6fd88bbb111f9
I think part of your problem is the lack of dotted notation on your ng-models. In general you want ng-model="container.piece". There are numerous articles on the problem of writing to a child scope if your models do not contain a dot in them. Have a look at Understanding scopes.
In a typical Angular application, I have been using resolves to load data required for a controller working on a template for a route.
Now I am working on an application, where we have HTML fragments inside a route. How do I provide some sort of dependency for individual fragments like I do for the whole route.
I want them to work like a mini ng-view each.
You can use ng-include like this:
<div ng-include="'myFragment.html'"></div>
Or if you have the fragment name in a variable (called fragment for example) on the scope:
<div ng-include="fragment"></div>
Your html fragment can then have a controller using the ng-controller="myFragmentController" syntax on the root element.
I have an Angular app that needs to support customizable reporting. My intention is to allow the user to select one of many reports available and have a back end REST api provide the template and the data as JSON (end user can customize the template).
The app would then insert the template somehow into a "reporting" view page then put the data in the scope and Angular should compile and display the report / template.
I've looked into ng-include however that seems to support only an URL or path to a document, however I have the template text already via the REST service and I cannot use static urls or file paths, this needs to be via REST api, if ng-include accepted the template text directly that might work but it doesn't.
I've tried writing a directive, trying to call a method on the page (getTemplate()) that would load the template already fetched from the scope however my directive doesn't have access to the scope apparently.
What tactic should I use to accomplish this? A directive seems best but I'm obviously doing it wrong and completely lost in the docs and my many attempts trying to accomplish this.
You could compile the dynamic template to an element on the DOM in a controller and then in the controller have something like this:
var el = angular.element('#myselector');
el.html(mydynamichtmlfromresource);
$compile(el.contents())($scope);
I would setup your route with template with single DIV container (you could pull all the static container template in a single JavaScript file using HTMLToJS online tool or grunt task):
<section class="view">
<div id="myselector"></div>
</section>
I've tried writing a directive, trying to call a method on the page
(getTemplate()) that would load the template already fetched from the
scope however my directive doesn't have access to the scope
apparently.
Yes you are right, but there is a way to pass data from scope to directive. lets say you want to pass a var "x" from scope to directive
use this
<directive directiveVar='x'/>
inside directive, you need to use isolated scope
"scope": {
"directiveVar": "="
},
this variable will be available only in controller and postlink function, so your directive template needs to be like this
<ng-bind-html="directiveVar"/>
inside the postlink you may need to use this code snippet
$scope.directiveVar =$sce.trustAsHtml($scope.directiveVar)
References
http://docs.angularjs.org/api/ng.directive:ngBindHtml
http://docs.angularjs.org/api/ng.$compile