I am using angular element for javascript error reporting.
I am following this tutorial for error handling and reporting in the angular application. This code is working in angular application but I want to reuse it outside the angular application. So I have packed this code in an angular element and used as a custom element in a non-angular application. But it doesn't work.
I think angular elements don't have the access to the scope of the page.
But I am not sure what is the problem here, I just want to know this is possible or not, If yes what mistake I am doing.
Thanks.
To access angular elements or component, you can go through this.
https://angular.io/guide/component-interaction
It allow you to access and manupulate element of another component.
If you are trying to access method from outside the source. you should go through ngZone
https://angular.io/api/core/NgZone
Related
I'm upgrading my applications Angular UI-Router to 1.0. The migration guide states
We no longer process resolve blocks that are declared inside a views
Fair enough. All resolve blocks should be put in the parent state however there is a limitation to this, which I'll explain.
My project currently uses named views and resolves data inside those views. This data gets passed to the controller. The issue that I'm having with upgrading to 1.0 is that some of my states re-use the same view and controller. The difference between the views is the data I pass to them via the views resolve block.
Here is an overly simplified example of what my application currently does
https://embed.plnkr.co/SFCzutU7N0AGsxpk9c6r/
As you can see, if was to move the resove block to the parent state, I would no longer be able to customise the data passed to each controller instance.
What is an alternative or workaround for this breaking change?
No answers :( Perhaps the question wasn't clear. Anyway, this is the solution I came up with. Not that happy with it but it works.
https://embed.plnkr.co/1YxFvHGjowYMvUhXmVsj/
I created a directive that I use on the ui-view element.
<div ui-view="blue-view" ui-view-param="blueView"></div>
This adds the given value to the parent scope.
I can then use this value to get the correct configuration.
$scope.color = viewParams[$scope.uiViewParam].color;
I am new to Angular and I understand one of its 'rules' is that no DOM manipulation should exist in the controller. I have heard that a lot of people starting out with Angular dont completely understand this and end up writing JS code directly into their application, my understanding of this is if you are writing an Angular application you should completely forget about regular JavaScript.
I have found that in order to use a third party plugin or a regular JS script in an Angular app is to wrap it up in an object. I have read that usually this is done by either wrapping the script inside a directive or a service.
So I have a couple of questions:
What are the main concerns to think about when choosing between a directive or a service as a wrapper?
Are there major performance and/or maintenance issues between using a directive or service as a wrapper?
I suspect that if you are doing any http requests that you would in that circumstance use a service, that is the only thing that I know when you would use a service as a wrapper object
You should use directives. In their definition, they have a link attribute which receives a function. This function is executed after the directive template is rendered in the DOM. So inside this function you can access any element inside the directive template.
Remember: if you are going to do some DOM manipulation you should only execute it in the linker function of the directive that renders the DOM you're manipulating.
You can learn more about creating custom directives in https://docs.angularjs.org/guide/directive
I am building a Angular Js (Ionic) app. So while reading the best practices in angularjs development lot of sources said that controllers should not be used for Dom interactions. Currently the ionicloading and ionicpopup calls are made from the controllers. Do these considered as DOM interactions, if yes where this suppose to be added ?
showing/hiding popup etc...from controller is perfectly acceptable.
e.g. you have a button on UI. You can use ng-click="onButtonClick()" and invoke the popup to disply some message.
When we say "avoid DOM manipulation within controller" - don't do stuff like document.getElementById("#someId").someDOMOperation() or $("#someId").someDOMOperation(). you better write a directive and use it on UI.
Actually $ionicLoading and $ionicPopup are services which are allowed to maninulate the DOM in specific cases like these (modals and such).
In your controllers you use these services and invoke the methods you need but the DOM manipulation happens in the service.
This is from Misko Hevery (Father of Angular JS)
I have used jquery integration with vaadin many times inside custom components. I wanna see an example of angularjs integration with vaadin.
Additionally need to know AngularJS is working with IE9.
you can check out https://github.com/akquinet/vaangular/tree/master/vaangular-demo for an example of how 2 integrate Vaadin and AngularJS...
The main thing that happens is creating a $scope for AngularJS that is wired up with vaadin. There is one essential challenge: the JavaScript invoked by vaadin is outside any AngularJS dependency injection or scope management. Meanwhile, all code you write for AngularJS is obviously inside dependency injection and scope management.
Furthermore, AngularJS assumes (at least per se) that the page's HTML is parsed once and wired up to AngularJS. With vaadin, however, the page's HTML is just some proxy to fire up vaadin, and there is nothing to wire up. Even more so, the part with AngularJS in it might be added to a vaadin UI a considerable amount of time after the application was started.
So, what is needed is an approach to create some new AngularJS-wired-up DOM and Controller on demand from outside AngularJS dependency management / scoping magic.
given a module 'innerModuleName' defined with angular.module, vaangular achieves this (in bespoke NgTemplate.js) in two steps:
First, a scope within AngularJS is created via
angular.injector([ 'ng', innerModuleName ]).invoke(function($compile, $rootScope) {
Second, the scope (called scpe) and DOM are brought together via
var connectorElement = angular.element(connector.getElement());
var cmp = $compile(templateElement);
scpe = $rootScope.$new(false);
cmp(scpe);
scpe.$digest();
connectorElement.append(templateElement);
At the end of this process, we have a new part of the DOM wired up to a new controller.
The point is that now, you can have the Vaadin Connector inside angularJS
Here is the jsbin link,
I want to use regular DOM API manipulation and feed it back to angular.
The result is if using $timeout, it works. but not window.setTimeout. I know it is not the right way to deal with angular. but in 3rd party component case, it makes sense to allow the 3rd party non angular developer to use pure vanilla or jquery to change the angular generated DOM attribute to get expected result.
How could we watch or observe the attribute change and update angular scope?
I found a hacky way to make it work by adding this line. $interval(function(){$(el).attr('info');},2000), you could comment it out in jsbin to see the expected behavior.
But it's not quite what i want. any better solutions?
Basically, Angular doesn't know that there is a change if you are outside the Angular context, so you need to tell Angular that something has changed.
One of the thing, you are already using is the $timeout service. But there is an another a cleaner solution for this.
The place where you are using jQuery to change the DOM, you can call tell angular to fix things:
angular.element(document.querySelector("body")).scope().$apply();
$apply() method call be trigger digest cycle manually which Angular does on it's own when you work inside Angular context.