I need help please, and thank you in advance: I have two Javascript files A.js and B.js. A is written in Angular and B is not. Now B needs to change a value of a scope variable inside A's controller. How can I do that? Thank you.
If you are using angular in the project already and the angular library is available, you can access the scope assosiated with any particular DOM element using angular.element().scope()
So, determine which DOM element is associated with the scope that you need, then use something like angular.element(document.getElementById('elementId')).scope(). From that you can access the scope variables.
Be warned though, if you change a variable this way and want the changes to be seen by your angular app, you'd probably need to add a watcher.
It's simple, in your A.js :
window.myVar= $scope.angularVariable;
Related
I'm learning angular material library, and there is md-autocomplete-parent-scope directive as a part of md-autocomplete directive. I didn't find anything in the documentation. Here is the source code. What is it's purpose, what does it do?
It watches variables on its scope, and then copies them to the parent scope ensuring the data is kept in sync.
My question is best explained with a layout of my template.
<body>
<my-directive option1="myVar"></my-directive>
<ui-view></ui-view>
</body>
As you can see I have a ui-view that will switch views/controllers with different state. The issue is that only one of those states contains the necessary and logical configuration variables within its scope for 'my-directive'. How can I pass those variables to the directive? I am trying to avoid using $rootScope for this, but it currently seems to me like the best choice.
There is several solutions, it depends on your configuration variables:
If your configuration variables are initialized at bootstrap and never changes, you could use "constants".
See: https://docs.angularjs.org/api/auto/service/$provide#constant
If your configuration variables may change, you could use "values"
See: https://docs.angularjs.org/api/auto/service/$provide#value
The last way i know is to use a services
See: https://docs.angularjs.org/api/auto/service/$provide#service
This post explains the differences between those 3 functionalities: https://gist.github.com/demisx/9605099
Edit: "How to pass thoses solutions in a view directly"
One possible solution would be to initialize the $rootScope on run function like this:
angular.module('myApp')
.run(function ($rootScope, yourConfigurationVariables) {
$rootScope.aSpecificNameWichReferenceYourChoice = yourConfigurationVariables;
});
See this post: Can I directly access module constant from HTML under AngularJS
I use ui-router to create routes with multiple HTML pages.
I have custom "target" directives within these pages that use $state.current in various ways.
But I also have other custom "lookup" directives in other states which load these HTML "templates", find these "target" directives, compile them and insert them into the DOM.
The problem I am having is that when the HTML content is compiled in these second directives, $state.current obviously refers to whatever state the application is in when it is compiled, whereas I would like the directive to compile as if it was in its "native" state.
Is there any (easy-ish!) way to get a reference to the target directive's "native" state? i.e. the state connected to the .HTML file which the directive is in? Is there a method (angular, jquery, native js or anything else) to get from the directive to the HTML template file? Then I could do a reverse lookup on the state objects. element.ownerDocument can get the URL of the current state, but not the HTML file of the template.
Alternatively, if the second directive had a reference to the "target" state, how should I modify the "target" directive so that it takes a state reference when it is compiled in both scenarios? Something in the compile function perhaps?? - but the docs don't seem to cover this kind of use case... I could do with a pointer in the right direction.
I hope that all makes sense. I have looked around for similar answers, but I guess this is an unusual use case? I'll knock up a Plunker shortly to help illustrate...
When you compile HTML using $compile, you pass in a scope object. Instead of using $state.current within the directive, could you attach the "state" you need to the scope object that you're passing in?
AngularJs provides you the possibility to create modules. All fine. It also give you the power to add components to your modules like service, controller, etc...
My only problem with that is that no matter in what module did you define a component, from another module it can be entirely overwritten.
Examples:
app.module('aModule').controller('SimpleController', functino(){...});
app.module('bModule').controller('SimpleController', functino(){...});
If you try to define let's say a state definiction with ui-router, it will just won't work well, since one controller will completely overwrite the one loaded first.
Did you guys met with this problem too or it's just me?
no, that's normal behavior. You can namespace it like 'component.controller' (so do this in the name of the controller, not the module) which helps, other then that is not possible in Angular 1
My app have multiple bootstrap tables and i want to create a global angularjs directive for sorting these tables to use this custome directive.
I have tried few but they don't help me enough what i want.
Please find plunk below for example.
http://plnkr.co/edit/BFkWWWtuZK4x6dHiEy3I
In the above example is not sorting as the scope is not updated.
So your directive isn't manipulating the outside scope. It can't do that because it doesn't have access to the variables in the parent scope because javascript is copy by value. You can manipulate what you are passed, but you can't manipulate the value of variable that was passed to you. So angularjs wants you to put objects between you and the references you are binding between so manipulations in across isolated scopes will propagate back to the caller. So if you modify your app to use that it works.
http://plnkr.co/edit/6sqQZk
Now it's a bit messy for my tastes. I'd probably move the whole table definition into the directive, and let it handle the whole thing. It would also make it easier to setup a sorting table without all of the plumbing, but that's up to you.