I am currently learning AngularJS on Udemy with the excellent AngularJS JumpStart with Dan Wahlin course. I am on Section 7 - Bonus: Getting Started Building Custom Directives.
I had defined a Hello World directive which was working fine; then I defined a new directive so that I could learn about shared vs isolate scope.
As soon as I include the second directive, I get the following error:
Error: [$compile:multidir] Multiple directives [helloWorld, helloWorld] asking for template on: <hello-world>
http://errors.angularjs.org/1.4.8/$compile/multidir?p0=helloWorld&p1=&p2=helloWorld&p3=&p4=template&p5=%3Chello-world%3E
Here's a Plunker.
If I comment out the script that defines either one of these, the other one works.
Why is this happening? I've clearly named both directives differently, so why is Angular throwing an error that basically says I've declared the same directive twice?
1) you forget to add "plain:true" in the directives ( if you put directly your html code in template you have to put "plain:true" otherwise use templateUrl to your html file)
2) the problem come from the fact that you create two times the same angular module :
var directives = angular.module('app').directives;
I update your plunker
http://plnkr.co/edit/cYkgdYcHXGlbtMRJHRw2?p=preview
I think the issue is defining directives variable and adding it each time to the directives.
The more popular way of defining directives is:
var app = angular.module('app');
app.directive('helloWorld', ....);
Or if you prefer it your way, either have all directives in the same file, or move var directives = angular.module('app').directives to app.js
Related
I want to know the difference between ng-bind-html and bind-html-compile directives. For example I gave
<p style='color:red'>test<p>
to ng-bind-html, this strips out the style where as bind-html-compile does not. May I know when each directive should be used. Thanks.
bind-html-compile is not a standard Angular directive, it comes with the module https://github.com/incuna/angular-bind-html-compile and it is used to compile binded data.To make it simple, it is equivalent to write html in your source code: it will be re-evaluated and if other directives are found, they will work as expected.
ng-bind-html is a standard directive (bundled with Angular itself) and just output html strings without compiling it.
for example, if you controller has a variable with plain html, like in:
$scope.dataToDisplay = '<h1><strong>Title</strong></h1>';
Then you can go with ng-bind-html.
If you need to inject variables that contain html with other directives, such as:
$scope.dataToDisplay = '<h1 ng-show="showIfOtherVariable"><strong>Title</strong></h1>';
then you need to aforementioned module.
I have an angularjs 1.5.8 application created using Jhipster.
For my website I want to make a HTML and JAVASCRIPT editor. Need to allow user to write HTML Code but JAVASCRIPT also.
Using this library I know I can achieve the follow.
https://github.com/incuna/angular-bind-html-compile
1: Bind HTML Code.
2: Bind Angular code if present in HTML
Eg: <h1>{{$scope.test}}</h1>
Would render correct value in the scope.
But what about something like this in the html
<script>
console.log($scope);
</script>
I get a $scope not defined error, somehow the $scope value is not available in the script tag.
If anyone curious that why I need to do this because we want to provide users of the application to create there own Angularjs Forms.
I solved using ng-include, here is the example source.
I wanted to do two things.
1: Make ng-include work from a scope variable which will contain html and javascript.
2: In the included string if I have a script tag I wanted it to render correct in the ng-include.
To achieve the #1 I did the following.
Used $templateCache service.
Sample code.
$templateCache.put('template-form', vm.html + vm.script);
For point #2
I made sure the script tag is structured in the following way.
<script>
(function() {
'use strict';
angular.module('myApp').controllerProvider.register('AppTemplateController',AppTemplateController);
AppTemplateController.$inject = ['$scope'];
function AppTemplateController($scope){
// WRITE YOUR CODE IN THIS CONTROLLER
// YOU CAN WRITE YOUR VARIABLES/FUNCTIONS HERE.
// MAKE SURE TO CALL THE method "vm.submitForm", to submit your form and pass the form object.
};
})();
</script>
This way you can inject a controller.
My requirement was very very specific to my projecct, I am not sure if others who did not face this issue even would understand what I am talking about. But for those who do face it, I hope you it helpful
I'm writing a directive to wrap plupload functionality.
The directive is intended to be used as you can see here: http://pastebin.com/sddR0UL7
Here (http://pastebin.com/c09LWeu4) you can find the template the directive reference.
And here's the directive's code (coffeescript): http://pastebin.com/SCwbkHWf
When visiting the page containing the directive I can see "Error: p is null" which
signifies that plupload could not be initialized (usually because references to
container is not defined).
Executing directive step by step I can see that the attributes it references are all
defined, so I think that the error is due to DOM not being compiled/linked yet.
How can I overcome this problem?
Thanks in advance for your help
I think I've found the culprit.
It seems like plupload.init manipulates the DOM so initializing the component within
controller breaks the "don't manipulate DOM in controller" rule.
So, by movine the initialization of plupload into "link" function, everything works
as advertised.
Still I'm open for other advices or best practices.
Thanks
I'm working on a project with AngularJS where I have an issue with 2 scopes conflicting:
- I have controllers defining scopes in different places of my DOM (it works great)
- I just added 3 directives to implement a "help" tooltip function just as chardin.js plugin in jQuery (http://heelhook.github.io/chardin.js/) : one main directive to be able to trigger them all at once, one 'child' directive on the trigger button, and one 'child' directive used to mark each DOM element on which I want the tooltip.
When I have only those 3 directives, it works great, but when I implement my controllers and my directives at the same time, I cannot use my controllers anymore (the scope seems to be completly wrong...)
The structure I have is something like this :
html -> main controller
4 sections -> 4 controllers
and I added 1 directive on the body (the main one), 1 directive to a button somewhere, and 1 directive on various elements of the 4 sections...
I'm aware my explanations are confused, but I really did my best for my first message here!
If you want to see at the code I have written for my directives, here it is:http://plnkr.co/edit/GrwgkH?p=preview
Thanks a lot for your help
S.
Try wrapping your controller's scope models in some object. Primitive values (e.g., number, string, boolean) are hidden in child scopes by its own property with the same name.
Read more in Understanding Scopes on AngularJS github wiki.
I ended up having issues with Primitive values as well. I ended up using sugar.js and Object.extended() to create a $scope.context object that I stored my model data on. This allowed for easy caching of the data as well.
I have 2 questions relating to directives. The first question relates to injecting a provider. I have used the compile directive example listed on the AngularJS web site. In that example it states to create a module and then create a directive from that module
// declare a new module, and inject the $compileProvider
angular.module('compile', [], function($compileProvider) {
// configure new 'compile' directive by passing a directive
// factory function. The factory function injects the '$compile'
$compileProvider.directive('compile', function($compile) {...
In my application in all I do is create the directive like so
myApp.directive('compile', function($compile) {...
I haven't referred to $compileProvider anywhere in my code, however my code still works and compiles templates quiet well. Why is that?
Also, although it works well when compiling templates they all seem to work except when I compile 'switch' statement. 'switch' statements do not seem to link the scope, all the other elements compile without a problem. Is this related to the fact that I haven't injected $compileProvider or is there something about switch statements that require an extra step when compiling?
Thanks
Frank
It works and compiles templates quite well because module.directive is simply shorthand for $compileProvider.directive. The docs for module.directive refer you to $compileProvider.directive.
As for using switch inside your directives, can you provide an example of how you're doing this? Depending on what you're switching on and where you're doing it, you may be defining your directive incorrectly. For example, if you're switching inside of directive callback, it's only going to be executed once, so only one of your case statements will win and create only 1 directive.