I am seeing some strange behavior that I'm hoping someone can explain.
From the render method in a backbone view I have been attempting to do the following:
this.$(".msg").colorbox();
And
this.$el.find(".msg").colorbox();
However in both cases, although the msg elements are located, when trying to invoke the colorbox method on the returned elements I get an exception that the method is not defined.
However when I use:
$(this.el).find(".msg").colorbox();
All is well. Is anyone aware of why this might be?
It is a common issue. Surely colorbox is a jQuery plugin. The jQuery plugin is injected until the View's Element is added to the DOM of your Page.
I mean, your code is normal to fail with the natural behavior.
$('body').append( view.render().el );
But if you do this, it will works:
$('body').append( view.el );
view.render();
Third party Backbone.js Plugins has a method "named" onRender that is executed after render the View(and assuming that added to the DOM). But if you do not work with additional Backbone.js Plugins just be sure to call the colorbox until your View was added to the DOM.
Shooting in the dark...
this.$el and $(this.el) are differente instances even if both make reference to the same DOM element.
Maybe since the moment Backbone did precompile this.$el = $(this.el) to the moment you call this.$el.colorbox() something has happend so this function is not available and it has never been available in the instance this.$el.
I don't know what is colorbox() but if this is part of a third part jQuery plugin can be important the order in that your JS code is loaded?
Related
i'm beginning angular developer and i have application with some controllers.
Is it possible to find out what is the Name the controller of some html if there is no "ng-controller" statement?
Like in case this is custom directive or the html loaded by ui-router?
p.s. i know about batarang but i dont see the name of the controller, only the scope
Thanks
If you can get hold of the DOM element you are interested in, you can run in the console:
angular.element(...).controller().constructor
This will print the constructor function (i.e. the function you have registered as controller) in the console; clicking on it (at least on Firebug) gets you to the source.
.controller() is an addon to the jQuery API from Angular. To get hold of the element in interest, the simplest thing is document.getElementById(). You can even use Firebug (or equivalent) to place an id in that element and then use getElementById().
Also for Firefox/Firebug let me propose the excellent angscope plugin.
I tried to create a Marionette module. When I access the template using jQuery in the module, it returns undefined. It happens for with or without default 6 arguments.
Note:
in the main.js this variable returns properly only in the module it returns undefined.
//App.module("LineModule", function(LineModule, App, Backbone, Marionette, $){
App.module("LineModule", function(LineModule){
console.log('LINE DRAFT : ' + $('#line-grid-content-template').html()); // undefined
});
What could be the reason? how can I fix it?
Thank you.
This will normally happen if #line-grid-content-template has not yet been added to the DOM. A few places to first check are, make sure it has the right ID (it's not a class or a miss spelling) and also that who ever is responsible for rendering the div has rendered it before you try to access it via the jQuery selector.
I have a feature that I am building that is about 90% of the functionality the Angular-UI Bootstrap Modal provides. The only difference is:
The modal needs to be positioned relative to a container div (I've already handled the styling aspect with the windowClass)
At issue is that the $modalStack service hard codes the body.append call, as seen here:
body.append(modalDomEl)
body.addClass(OPENED_MODAL_CLASS)
Step one is here
I started by simply copying / pasting the open methods on each service (renaming as openWithinElement), and modifying what I needed to make it work. As you can see, if you run the app, it throws an error on the $q dependency not being defined. Okay, I guess that makes sense.
Next I added the dependencies to the provider.decorator method, which bypassed all dependency errors. But then I was getting another error, function getTemplatePromise is undefined ... well of course it isn't defined. It's an internal method to the service.
That's when I got truly stuck. It seems impossible to decorate this service with a new method, without redefining all of the private functions / objects / props within the service.
Is that the case?
[EDIT TO ADD]
I ultimately ended up decorating the service with an updateParentElement method, which then moved the modal to the passed in element, which was executed in the .opened promise. It's hacky, but works, but I'm hoping there's something I'm missing with decorators.
[/EDIT]
The simplest solution as I see it will be to provide specific windowClass, then after dialog is open find its element by that class and move it to the container.
I'm using a custom jquery plugin which transforms table to a tree. And when i'm loading data from ng model i need to recall plugin's constructor. but i can not find that event, when i need to call that.
I've tried to $watch model variable - doen't work well
You should create a new directive instead of doing this in a controller.
By using a directive, you'll be sure that the code located in its link function is applyed after DOM complilation.
It is intended to do what you want.
see http://docs.angularjs.org/guide/directive
I want to test if a directive binds the correct jquery functions to the DOM and that they work.
For instance i want to test if an element is visible after it was slid up with $.slideUp() or i want to execute a click event on an html input.
It seems that i need to somehow attach the compiled directive to the DOM to make this happen. I've watched the testing directives video on youtube where he says that it is possible but he doesnt mention how you do it.
I'm kinda stuck.
Heres the link to the failing test: http://plnkr.co/edit/PojXf8?p=preview
Couple of things:
First, if you want to use jQuery with Angular, it needs to be loaded before Angular is, so move its script tag before Angular's.
Second, you're right about attaching the directive to the DOM. In a beforeEach call, you can use jQuery to create a host div and then remove that div in an afterEach call.
Here that is in a fork of your plunk.
That said, you only need your div in the DOM to check for visibility, which I'm not even sure you need to do in most cases. For example, you could use Sinon to spy on the slideUp call to make sure it happens and rely on jQuery's tests that it actually works.
And you can always trigger clicks directly just by calling elm.click() using jQuery.