I was working on a web app prior to finding meteor and to have multiple pages I had things like this (I'm using bootstrap):
signup
In order to have a button for a user to sign up. I'm trying to convert this to a template in order to work with the meteor framework. I made a template that had all the code from my signUp.html file and changed that line of code to look like this:
signup
and this gave me the following error:
INCLUSION template tag is not allowed in an HTML attribute
I changed it again to be like this:
<a {{> signUp}} class="btn btn-lg btn-default">signup</a>
and I got this error:
Reactive HTML attributes must either have a constant
name or consist of a single {{helper}} providing a dictionary of names and
values. A template tag of type INCLUSION is not allowed here.
Any help would be appreciated.
What you really need is a router. Check out iron router
You can add it using
meteor add iron:router
Then, set up the routes for your signup page. (Assuming that you have named the template as "signUp" )
Router.route('/signup', function () {
this.render('signUp');
});
And finally use the link as :
signup
Related
I want to use AngularJS to separate my jquery mobile HTML. But it seems ng-include can't include external HTML as the parent content, parent CSS and js are not applied to it. Below is an example. Would you like to let me know how to fix it?
Below is the example.
http://plnkr.co/edit/I91t9mjGJ58ZS4H2bymL?p=preview
It's obvious you cannot directly access external file from other site due to CORS policy.
If you do want to get the template from other site with different domain name, make sure that domain provides the API for you to $http.get the html template string, and then you can inject it into your Angular controller, where your view may access from.
The basic process may be as follow:
Check the API for the third party domain, where you can get the template string.
Use $http.get (or $resource, depends on your choice) to get the template.
Wrap the $http service and your parsing login into a new Angular service. (e.g. angular.module('yourApp', []).factory();
Inject this service into the Angular controller which you bind in your directives.
In your view file, use ng-include in that controller to access the template.
So I have a website set up and I wish to dynamically load other .html files into a div. Each .html file contains some content but 1 .html file contains its own angularjs directives.
I was using ng-bind-html along with $scope.content = $sce.trustAsHtml(data); but I have discovered that this prints out the html raw (does not process any angular directives).
I've tried to use the various solutions on stack overflow but none have worked for me.
Website: http://algorithmictrading.azurewebsites.net/
App.js: http://algorithmictrading.azurewebsites.net/js/app.js
Example of .html pages being loaded:
http://algorithmictrading.azurewebsites.net/includes/home.html
http://algorithmictrading.azurewebsites.net/includes/about_us.html
.html page that contains angular directives:
http://algorithmictrading.azurewebsites.net/includes/download.html
As you can see, if you navigate to the website and click on the 'download' tab, the content is loaded but the angular in the drop down menu is not handled. The test button I added should also produce an alert box.
Right now, the code is based off this thread:
call function inside $sce.trustAsHtml() string in Angular js
Thanks!
I found that angular was stripping out the directives from html strings if I didn't pass them through the $sce.trustAsHtml method before passing them into the template:
$sce.trustAsHtml('<a href="/some-link" directive-example>link to add</a>');
This combined with a watch/compile on the element's content you're inserting html into seems to do the trick:
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope);
});
Take a look at this example: http://plnkr.co/edit/VyZmQVnRqfIkdrYgBA1R?p=preview.
Had the same problem this week and the best way I found to make it works was creating a custom directive called "BindComponent".
Change the ng-bind-html directive to a custom directive, and inside the link method you put this:
element.html(markupModel);
$compile(element.contents())(scope);
The markupModel can be a string with html code or you can use $templateCache($templateCache docs) to get the code from a .html file.
I see examples that show directives rendering an HTML file in lieu of the directive. Or controllers rendering an HTML snippet as a scope variable, written directly between single quotation marks - like
$scope.items = '<ol><li>an item></li> <li>another item</li></ol>'
(this does not work well for me because I have other single quotation marks in the middle of my HTML snippet that seem to stop the HTML snippet from rendering properly.)
Here is something I tried that did not work:
Controller code:
innerapp.controller('ResourcesController', function($scope, $sce, $http) {
$scope.template = 'employeelists.html';
});
HTML code:
<div ng-controller="ResourcesController">
<div ng-bind-html-unsafe="template"></div>
</div>
I have 'employeelists.html' in my app/assets/templates folder. I am using AngularJS with Rails, and this setup already lets me call the file like this:
div ng-include="'employeelists.html'"></div>
But I want the controller, instead of ng-include, to render the HTML file.
Basically, I am working on functionality such that if I select an item on the HTML page (under this AngularJS controller), a function in the controller gets called that updates the scope variable (that's linked to a template file) with another template file.
First, please keep in mind DOM manipulation should allways be left to directives, not controllers. Second, I would highly recommend you looked into views using ui-router. This could easily accomplish what you want to do. Here is an example of simple view changing:
https://angular-ui.github.io/ui-router/sample/#/
Also, someone already found a way to input code to the ng-include directive so you could update it:
angular - update directive template on click
However, do read the answer above how he also recommends you use $stateProvider (ui-routers state configurator) since it would be a much easier approach to what you are trying to do.
I hope this helps
I have two cshtml-files in the same subfolder of Views. One of the templates is meant to include the other template. I tried to accomplish that as follows:
Main template:
<html>
<head></head>
<body>
#Html.Partial("~/Views/Pdfs/Header");
</body>
</html>
The error I get is
Unable to compile template. The name 'Html' does not exist in current context.
What am I supposed to do additionally?
As commented by Erik there is no Html in RazorEngine (see the linked answer), however you can use #Include("mytemplate") instead.
If you want to be compatible with the #Html.Partial() syntax for some reason you can extend the RazorEngine syntax like this.
Basically what you want to do is provide your own class inheriting from TemplateBase<T> (or ITemplate to be exact) and then set it either via configuration or the #Inherit MyBaseClass<MyModel> syntax. In this case you could just call the Include method from your Partial method within the Html helper class.
Been annoyed by this for a long time. Wrote all the infrastructure classes to just get this working like you'd expect in MVC, without all the MVC burden:
var razor = RazorHelper.O;
var html = razor.RenderFromMvc(#"Views\RazorEngine\TestEmail.cshtml", vm);
https://github.com/b9chris/RazorEngineComplete
I've got an AngularJS project, and I'm using $routeProvider and $locationProvider with ngView to swap out parts of the DOM as necessary. I'm running Angular 1.0.6.
However, when I define a link in my document like View 2, it gets turned into ?q=home/#!/view2 when I click on it.
Why does the query string get added? How can I prevent that?