I'm currently trying to integrate some angular into our MVC application. This is requiring some slightly more in-depth knowledge of how angular compiles the DOM, but it doesn't seem unachievable.
Here's a link to the CodePen
Essentially, I have a bunch of code (that I can't touch) which controls the page being loaded into DOM. This uses JQuery.
What I have is an ng-include that loads in a template, which gives me my 'angularised' DOM. Because this element is loaded in via AJAX, I'm having to manually $compile it when its inserted.
This is works okay until I switch to a different view, and then back again. The controller is instantiated again (as expected), but the previous one is still responding to the event.
I think I need to $destroy the old controller and all its child scopes, but how do I obtain them?
What you were missing is destroying the event listener $scope.$on(notifyRefreshEvent, ... and you do that by doing something like this. Here's your EventService snippet which solves this issue:
app.service('EventService', function($rootScope){
var notifyRefreshEvent = "contact::refresh";
var eventListenerDestroy;
return {
...
}
...
function onContactRefresh($scope, handler) {
eventListenerDestroy = $scope.$on(notifyRefreshEvent, function (e, data) {
eventListenerDestroy(); // this guy destroys it
handler(data);
});
}
});
Also, here's the forked codepen solution
Related
Suppose, I am making a custom Angular directive that has to examine and manipulate the DOM tree inside it (to be precise: the DOM tree under the element the directive is applied to). The right place for such manipulation is the directive's post-link function.
That works fine while all the HTML inside the directive is inlined. Problems appear when inside the directive we have other directives that load their templates using "templateUrl" property, or just "ng-include" directives to insert partials.
Those templates and partials are loaded asynchronously. That means, at the compile stage Angular will initiate the partial loading and will continue compiling without waiting for the loading to complete. Then, at the moment the parent directive is linked, the contained partials loading may still be in progress, so the directive's post-link function sees nothing inside.
In other words: the directive's post-link function is designed to have all nested DOM ready by the moment it is called, but with the async templates and includes this is not the case!
And template pre-loading does not help, because they are still accessed asynchronously.
How do people overcome that?
The task seems to be quite common, but I did not manage to find a good and reliable solution. Do I miss something obvious?...
Update: Well I have created a Plunk to illustrate the problem. Actually it reproduces only the problem with ng-include, the external template for sub-directive works. In my project it did not though, maybe this is a race condition, I have to investigate more.
You can wait for the load of the main view with:
$scope.$on('$viewContentLoaded', function () {
//Here your view content is fully loaded !!
});
This trick, same as $timeout, not works if you are loading views with ng-include. You should wait for all the partial views. The right events order is:
$viewContentLoaded
$includeContentRequested
$timeout
$includeContentLoaded
You can use $includeContentRequested and $includeContentLoaded with a counter for wait the content of all included partials:
var nIncludes = 0;
$scope.$on('$includeContentRequested', function (event, templateName) {
nIncludes++;
console.log(nIncludes, '$includeContentRequested', templateName);
});
$scope.$on("$includeContentLoaded", function (event, templateName) {
nIncludes--;
console.log(nIncludes, '$includeContentLoaded', templateName);
if (nIncludes === 0) {
console.log('everything is loaded!!');
// Do stuff here
}
});
I have not found another more elegant solution.
use $timeout for the external template directive (This will still not work for ng-include). it will call when async loaded template finish loading. (By the way this is clean code, it won't cause performance issue)
I'm trying to build custom radio buttons, and I've discovered that my controllers are being executed twice for each instance. I have not specified the view controller twice. That seems to be the common problem. I'm using angular-routing, and the relevant snippet for that is this:
$routeProvider.when('/:action', {
templateUrl: function (params) {
if (!params.action) params.action = 'Index';
return '_' + params['action'];
}
});
I use ng-controller in the template. The routeChangeSuccessful event (or whatever it's called) fires, and it compiles everything normally, but it seems to follow up with some post link function that also compiles everything; thus the double instances.
What am I doing wrong? How can I avoid the duplicate calls?
Update
I've discovered that it's recompiling the initial view, whatever that was, when routing through AngularJS. I can work around this by adding a secret blank page that is always hit first (I'm developing in an .NET MVC project, so I can control that through the MVC routing), but that seems rather silly.
Why is ngRoute recompiling the initial view every time? Is there an elegant workaround?
Last I checked, ngView doesn't prevent the compilation of the template that is initially fetched, and in fact it recompiles it when the view changes before replacing it and compiling the template fetched by ngRoute.
To resolve this, have only AngularJS requests return templates. Return a blank template otherwise. I handle this by having the AngularJS requests include an underscore prefix. In the MVC routing, if the underscore is there, return the requested partial; otherwise, return the layout with an empty body.
I have included a third party script in my angularJS app, which appends some HTML to the body
document.body.innerHTML += thirdPartyHTML;
Whenever that is done it seems like my ng-click events won't fire. Is the HTML by the third party script appending the HTML in the wrong way, or should I somehow refresh AngularJS view on the DOM ($scope.$apply)?
Update: It seems like I can reproduce the error, with just calling document.body.innerHTML += ''; myself. It apparently hasn't anything to do with the onclick event. If you have your own AngularJS app, you can try to call document.body.innerHTML += ''; after the document has loaded, and none of the ng-click events work.
Whenever innerHTML is changed the browser has to recreate the DOM tree. That means that all information associated with the existing DOM elements is lost.
This does not only include event listeners. Angular stores scopes and controllers on DOM elements. So basically the application is gone.
If the third party app really changes the innerHTMLof the body element, then you better let it run before angular.
As an alternative you can initialize the application manually and don't use the ng-app. The details can be found in here
Using AngularJS and UI Bootstrap, I want to dynamically add alerts to DOM. But if I dynamically add an <alert> element to DOM, it's not compiled automatically. I tried to use $compile but it doesn't seem to understand tag names not present in core AngularJS. How can I achieve this? Is it even the right way to "manually" add elements to DOM in services?
See Plunker. The alert in #hardcodedalert is compiled and shown correctly but the contents of #dynamicalert are not being compiled.
Edit:
I'd later want to have alerts shown on different context and locations on my web page and that's why I created a constructor function for the alerts, to have a new instance in every controller which needs alerts. And just for curiosity's sake, I was wondering if it's possible to add the <alert> tags dynamically instead of including them in html.
I've updated your plunker to do what you're trying to do the "angular way".
There are a few problems with what you were trying to do. The biggest of which was DOM manipulation from within you controller. I see you were trying to offset that by handling part of it in the service, but you were still referencing the DOM in your controller when you were using JQuery to select that element.
All in all, your directives weren't compiling because you're still developing in a very JQuery-centric fashion. As a rule of thumb you should let directives handle the adding and removing of DOM elements for you. This handles all of the directive compiling and processing for you. If you add things manually the way you were trying, you will have to use the $compile provider to compile them and run them against a scope... it will also be a testing and maintenance nightmare.
Another note: I'm not sure if you meant to have a service that returned an object with a constructor on it, so I made it just an object. Something to note is that services are created and managed in a singleton fashion, so every instance of that $alertService you pass in to any controller will be the same. It's an interesting way to share data, although $rootScope is recommended for that in most cases.
Here is the code:
app.factory('alertservice', [function() {
function Alert() {
this.alerts = [];
this.addAlert = function(alert) {
this.alerts.push(alert);
};
}
return {
Alert: Alert
};
}]);
app.controller('MainCtrl', function($scope, alertservice) {
var myAlert = new alertservice.Alert();
$scope.alerts = myAlert.alerts;
$scope.add = function() {
myAlert.addAlert({"text": "bar"});
};
});
Here are the important parts of the updated markup:
<body ng-controller="MainCtrl">
<div id="dynamicalert">
<alert ng-repeat="alert in alerts">{{alert.text}}</alert>
</div>
<button ng-click="add()">Add more alerts...</button>
</body>
EDIT: updated to reflect your request
I've been using directives in AngularJS which build a HTML element with data fetched from the $scope of the controller. I have my controller set a $scope.ready=true variable when it has fetched it's JSON data from the server. This way the directive won't have to build the page over and over each time data is fetched.
Here is the order of events that occur:
The controller page loads a route and fires the controller function.
The page scans the directives and this particular directive is fired.
The directive builds the element and evaluates its expressions and goes forward, but when the directive link function is fired, it waits for the controller to be "ready".
When ready, an inner function is fired which then continues building the partial.
This works, but the code is messy. My question is that is there an easier way to do this? Can I abstract my code so that it gets fired after my controller fires an event? Instead of having to make this onReady inner method.
Here's what it looks like (its works, but it's messy hard to test):
angular.module('App', []).directive('someDirective',function() {
return {
link : function($scope, element, attrs) {
var onReady = function() {
//now lets do the normal stuff
};
var readyKey = 'ready';
if($scope[readyKey] != true) {
$scope.$watch(readyKey, function() {
if($scope[readyKey] == true) {
onReady();
}
});
}
else {
onReady();
}
}
};
});
You could use $scope.$emit in your controller and $rootScope.on("bradcastEventName",...); in your directive. The good point is that directive is decoupled and you can pull it out from project any time. You can reuse same pattern for all directives and other "running" components of your app to respond to this event.
There are two issues that I have discovered:
Having any XHR requests fire in the background will not prevent the template from loading.
There is a difference between having the data be applied to the $scope variable and actually having that data be applied to the bindings of the page (when the $scope is digested). So if you set your data to the scope and then fire an event to inform the partial that the scope is ready then this won't ensure that the data binding for that partial is ready.
So to get around this, then the best solution is to:
Use this plugin to manage the event handling between the controller and any directives below:
https://github.com/yearofmoo/AngularJS-Scope.onReady
Do not put any data into your directive template HTML that you expect the JavaScript function to pickup and use. So if for example you have a link that looks like this:
<a data-user-id="{{ user_id }}" href="/path/to/:user_id/page">My Page</a>
Then the problem is that the directive will have to prepare the :user_id value from the data-user-id attribute, get the href value and replace the data. This means that the directive will have to continuously check the data-user-id attribute to see if it's there (by checking the attrs hash every few moments).
Instead, place a different scope variable directly into the URL
My Page
And then place this in your directive:
$scope.whenReady(function() {
$scope.directive_user_id = $scope.user_id;
});