I'm trying to get all available templates in Ember, as of 2.16.x Ember.TEMPLATES doesn't seem to work anymore. Basically I need exactly this, is there an alternative?
I'm trying to dynamically load a route's template based on a model property. I already have the logic working, all I need is a list of the templates.
Related, but doesn't work anymore: List all available Handlebar Templates in the JavaScript console
Thanks!
You can access all of the entries via window.requirejs.entries. If all your templates are fitting some naming or directory rules then you can find the list of them. For example, if all of your templates resides under templates directory, you can find them as following:
var getKeys = (Object.keys || Ember.keys);
getKeys(window.requirejs.entries).forEach(itemName=>{
if(itemName.indexOf('templates')>=0){
console.log(itemName, itemName.indexOf('templates')>=0);
console.log(window.requirejs.entries[itemName]);
}
});
Related
I would love to implement Drag and Drop in my Angular project using the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it seems to be heavily dependent on RequireJS. I've not used Require for a while and only then for an example app or two. Is there an easy way to untangle Require from this module?
The author seems to think it is simple (https://github.com/bevacqua/angular-dragula/issues/23) and has shut down similar questions as well without a real explanation. I've looked at the code and don't see how to load the module without adding RequireJS to my project (which I don't want to do). Am I stuck with either not using this module or adding Require or is there a way to use this without Require?
OK, after help from those who commented (thanks everyone!), I was able to get this to work. There are a couple things that you need to do. First, I was bundling this module with the rest of my modules and trying to call it. That will not work because it needs to initialize with a parameter (angular). Therefore, you need to do the following:
Add a reference to angular-dragula.js (or the min version) to your index.html page below the declaration for angular but above where you create your app.
When you declare the dependencies for your app, specify angularDragula(angular) (not in quotes).
Use dragula as you normally would. If you need to access the service, the name would be angularDragula.
For example, here is my declaration of app:
var app = angular.module('app', [
'ngRoute',
angularDragula(angular)
]);
And then to get a simple list to be drag and drop capable, this is my html:
<div dragula='"bag-one"' dragula-model="vm.items">
<div ng-repeat="item in vm.items">{{ item }}</div>
</div>
Note that I do not declare angularDragula anywhere, unlike the examples. In the example the author gives, he requires angular and creates the angular variable and then he requires angular-dragula and creates the angularDragula variable. This is not needed if you are not using RequireJS as long as you load the scripts in the right order.
I'm making a large Meteor app and all my templates are now named "veryLongNameOfMyTemplate".
I want to avoid having such long names.
I tried to create my templates in packages but I have a strange issue: while most package variables are file-scoped or package-scoped, templates are not: they are global by default.
How can I create package-scoped templates?
Looking at trello.com/c/igqeUcwM/17-template-and-helper-namespacing it
seems to be a requested feature, but not currently possible.
Thanks, #christian-fritz
I know that it is possible to customize the templates of the ui.bootstrap.typeahead either by:
declaring the 'typeahead-template-url' (for the internal 'typeahead-match.html' file) and/or
using $templateCache to customize the outer template ('typeahead-popup.html').
My issue is that I want to have two typeaheads on the same page, but with different templates, both internal(typeahead-match.html) and external (typeahead-popup.html), is it possible?
Look at the angular-ui-bootstrap FAQ:
https://github.com/angular-ui/bootstrap/wiki/FAQ
The first item there is about the templates... most importantly if you use one of the files with -tpls- in the name, the templates are in-lined (added to the template cache as part of the JS file using HTML strings, thus no longer needing the html files).
Is it possible to have multiple controllers on one route / page. I want to show 2 features of my application on one page. But they are not directly related so each would need it's own controller, model and (partial) view.
But I can't seem to figure out how I could do this.
It seems that I must use the {{render}} option here.
Is it possible to have a subdirectory structure here?
When I have {{render "dashboard.users"}} for the template it does look in template/dashboard/users.hbs but for the controller I can't seem to find where it looks and what the naming conventions should be.
E.g. should it be
App.DashboardUsersController = ... ?
edit:
Looks like it should be, but I shouldn't place it in a subfolder of controllers but name it dashboard_users_controller.js
You get this effect by rendering templates into multiple outlets of their parent template: Guide and API Docs
Here is a running JSBin demonstrating it
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