I am using rivets.js for data binding in my backbone file. But i am using handlebar templates. so when i display my data in handlebars through rivets, it does not work. It works fine without handlebars.
in my javascript file:
var obj = {name: 'my name'};
rivets.bind($('#div1'), {'opp': obj});
in my handlebar file:
{{opp.name}}
Rivets and handlebars is not supposed to be used together. Rivets supports expressions in the form {} (by default) just like handlebars {{}}.
Rivets is expecting a "Rivets template", not handlebars template. And handlebars is expecting a handlebars template, not rivets template.
Either use rivets or use handlebars.
Related
i'm storing a html string in a scope object and want to pass it to a variable
$scope.template1 = "div ng-include="'/app.html'" </div>"
Then i want to pass this template1 to my bootstrap template option with the output of $scope.template1
tour.start{
template:$scope.template1// Here i'm looking the output with the content of app.html
}
How can i compile template1 and pass the output?
Simply use the $compile service:
$scope.template1 = $compile("div ng-include="'/app.html'" </div>")($scope);
This way, your template will contain your ng-include content
(remember to add $compile to your dependencies).
By the way, I recommend that you use $templateCache service to store your static content in javascript, in order to have a unique place (and optimized too!) to store your templates:
app.run(function($templateCache) {
$templateCache.put('app.html', '<span> app.html content </span>');
});
and your ng-include will find automagically your app.html template.
You should do this also for your template1 variable, and retrieve it in your JS by using:
$templateCache.get('template1.html')
I would like to include markdown text as part of my template.
I am using angular-meteor and I see 2 alternatives:
install a package of angular such as angular-markdown-directive
include a file without the .ng.html postfix and use meteor's markdown like this: {{#markdown}}{{>innerPreview}}{{/markdown}}
Is there other alternatives? will it work? which one is better?
I have created package oshai:angular-marked in atmosphere from hypercube's package. you can search for it in atmosphere.
At one point I created my own directive using showdown, but then decided I wanted to get rid of it and just use what Meteor already came with.
First thing. I have an .html file I called meteorTemplates.html. I just place all of the meteor templates in here that I use. I only have 2 and they're small.
In any case. The template looks like this:
<template name="mdTemplate">
{{#markdown}}{{md}}{{/markdown}}
</template>
Inside my controller I have:
$scope.my.markdown = '#Markdown';
According to angular-meteor docs:
The meteor-include directive holds the Angular scope of the directive as the as Template.currentData of the Meteor template.
So, Template.currentData == $scope.
Then inside the template helper I'll use the Template.currentData() like $scope.
Template.mdTemplate.helpers({
md: function() {
return Template.currentData().getReactively('my.markdown');
}
});
My ng.html file will look like:
<div id="markdown-preview">
<meteor-include src="mdTemplate"></meteor-include>
</div>
Using jQuery, it's easy to replace the innerHtml of a single div, either with content from the elsewhere in the HTML, from a JavaScript var, or from an HTTP call.
How can I do that in AngularJS (without using jQuery)? For example, to keep a page the same, but only replace a side panel?
Try using ng-view / ui-router . More details :
https://docs.angularjs.org/api/ngRoute/directive/ngView
angular-ui/ui-router, how do I inject partial view using $stateProvider?
It seems the answer is: "Think twice if you need to do this." In Angular, the paradigm isn't to modify the HTML, but rather to bind the HTML. So, bind the div's src to a scope or controller var via ngInclude, and just change that var.
Hi I would like to implement Jade templates in my AngularJS project, and have mixin in my template (reusable code).
However the problem that I am facing is that we cannot use Mixin with arguments. Am I doing it correctly or is there any alternative for the same in AngularJS that I am missing?
You can create an js object from your model and pass it as strings to the mixin like the following:
+avatarRow({name: '{{avatar.name}}', uuid: '{{avatar.uuid}}', verificationCode: '{{avatar.verificationCode}}', status: '{{avatar.status}}'})
Inside the mixin you can now access e.g. #{avatar.uuid}
I considder to automate this further, because this leads to a duplication of the models code which is not so nice yet. I will share my solution if I get one :)
I figured out that mixins cannot be used in Angular as the scope is to be defined. Hence now created element directive and passed in the template (which was meant to be written in Mixin) as the templateUrl in it.
Little brief: I'm using AngularJs with Meteor+Blade without using Meteor_angularjs package for meteor. Blade constructs the body of the page in the server then I manually bootstrap angular in the client.
Blade has template files available under Template['template_name'] so they can be easily rendered on the client. I would like to do something like:
div(ng-include='content.blade')
// HTML => <div ng-include='content.blade'></div>
and somehow make it work.
To keep compatibility and not creating new directives I thought it could be possible to intercept the XHR requests angular makes to static templates and add the condition
if(URI ends with '.blade') then
name <- strip '.blade' in URI
return Template[name]()
Which should return the compiled HTML for that template.
UPDATE:
Coincidentally I ran into $templateCache and now I think it's the way to go.
I created a 'ngMeteor' module that I'll use for meteor-angular integration.
angular.module 'ngMeteor',[], ->
throw 'Meteor object undefined.' unless Meteor? # Is it fine to put here?
angular.module('ngMeteor.blade',['ngMeteor']).
run ($templateCache) ->
$templateCache.put "#{name}.blade", render() for own name, render of Template
In my app:
angular.element(document).ready ->
angular.bootstrap document, ['app']
app = angular.module 'app', ['ngMeteor.blade'], ->
app.controller 'mainCtrl', ($scope,$templateCache) ->
$scope.content = $templateCache.get "content.blade" # Works!!
Blade(body.blade):
#main(ng-controller='mainCtrl') {{ content }}
Now it works, I can get the rendered template from the controller after injecting $templateCache and geting the template by its name but ng-include still won't work.
My previous update in the question was actually the correct answer, ngInclude didn't work for me because of div(ng-include="'content.blade'") ... yes, the inner quotes! its like the Nth time I have that problem.
In resume the answer is:
angular.module('blade').
run ($templateCache) ->
$templateCache.put "#{name}.blade", render() for own name, render of Template
Template is the meteor global variable where blade will store templates ready to be rendered, then with $templateCache I put the rendered templates with the corresponding names/ids, that way Angular can use them.
EDIT: Based on this question I created a meteor package ng-meteor for braceless angular development in meteor.