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.
Related
i noticed that AngularJS UI Bootstrap uses the following approach for templates:
angular.module("uib/template/progressbar/bar.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("uib/template/progressbar/bar.html" }
So i think it's quite nice solution but what is the reason to create module for each template url like angular.module("uib/template/progressbar/bar.html" or angular.module("uib/template/progressbar/progress.html" etc
What benefits it will give to us?
Having a module for each template separately will result in proper separation of code. Each module will Handel the code for each template and will prevent the user from mixing the code. It's quite a universal rule that a function or entity should do only its own duty and not more that that.
is there a way to pass value from Angular (version 1.5.2) controller to mixins in the SASS?
I do have mixin which display elements according to two input values which are accessible in controller and template.
I have tried ng-style but that does not trigger mixins.
Ok, after interviewing a few developers I know the solution.
Probably, the best way will be dedicated directive for that element and inside calculation of inline css.
SASS/LESS are preprocesors, so code is compiled to css - it is impossible to invoke mixin after that process.
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>
I'm new to this TypeScript thing. There are a bunch of examples of using Angular with Typescript, and they all have controller classes. It looks like I have to repeat the injected services a number of times in the class declaration. Can I create an Angular controller without creating a class? Preferably something like what I could do with JavaScript:
module.controller('controller', function(service1) {DoSomething();});
You can if you want to (since valid js is valid ts). But you will lose the type safety of classes.
I'm looking to extend an AngularStrap directive (typeahead in this case) to have more than the provided functionality. After some research, I'm thinking the best way is to wrap the typeahead directive with my own custom directive so that I can extend it.
I've followed all 3 suggestions found here for extending an Angular directive, but none of them seem to give me access to the typeahead controller and it's public functions.
Am I going about this the wrong way? What is the best way to extend the directives for custom functionality? Any help is greatly appreciated.
In my case, I followed the approach similar to the 2nd way described there.
The difference was to use 'require' to refer to the controller of the parent directive.
How to require a controller in an angularjs directive
If you look at the source of AngularStraps typeahead directive (Link) you'll see that it has two parts, the provider; '$typeahead' and the directive 'bsTypeahead'. What I've found in the past is easiest with this library is to copy the 'bsTypeahead' directive, rename it to something else then modify it's code to do as I want. The $typeahead provider acts like the controller in this case and all other AngularStrap directives work the same.
First, the best way is definitely to wrap the Angular Strap Directive in a Directive of your own. I've done this quite a bit with different Strap Directives. Secondly it's hard to say specifically what you need to do because you didn't name any specific goals. But if you look on the doc's for the Angular Strap project you'll notice various hints. In the case of typahead you have access to the $typeaheadProvider, also this is some what speculative on my part, but typeahead has a tooltip dependency so you may be able to use the $tooltip service to fiddle with typahead in your wrapper. Finally, the Angular Strap API for typeahead is pretty robust take another look at what is already available and you maybe able to accomplish what you want/need by working with what you've already got. I.E you can specify a custom template, or specify different prefix events which after taking another look at the docs myself seems to be an interface for interacting with the tooltip scope methods. I'm sorry this couldn't be more detailed on exactly what you need to do, but hopefully it will get you moving in the right direction.