Salutations, friends. I have a fair bit of AngularJS experience, as well as a lot of native mobile experience, but starting at a new job I have just inherited a previous developer’s not-at-all-documented and weirdly-structured Ionic project. Getting my head around Ionic has been OK, even though most of my time so far has been spent fixing the glitchy buggy interface (not Ionic’s fault, it just seems that the previous dev didn’t even notice the glaring issues).
Long story short, it has come to my attention that a simple directive like this (generated using McFly Generator, although I have tried any number of ways of structuring and including the directive):
myDirective.js
'use strict';
/*eslint consistent-this:[2, "myDirectiveCtrl"] */
var directivename = 'myDirective';
module.exports = function(app) {
// controller
var controllerDeps = [];
var controller = function() {
var myDirectiveCtrl = this;
myDirectiveCtrl.directivename = directivename;
};
controller.$inject = controllerDeps;
/*eslint-disable consistent-this */
// directive
var directiveDeps = [];
var directive = function() {
return {
restrict: 'AE',
scope: {
title: '@' // '@' reads attribute value, '=' provides 2-way binding, '&" works with functions
},
controller: controller,
controllerAs: 'myDirectiveCtrl',
bindToController: true,
template: require('./myDirective.html'),
compile: function(tElement, tAttrs) {
return {
pre: function(scope, element, attrs) {
},
post: function(scope, element, attrs) {
}
};
}
};
};
directive.$inject = directiveDeps;
app.directive(directivename, directive);
};
myDirective.html
<span>2 + 2 = {{2+2}}</span>
Results in the following “2 + 2 = 4”.
Ok, all good.
But if I make a small change to the template, like so:
<ion-content>
<span>2 + 2 = {{2+2}}</span>
</ion-content>
the result is “2 + 2 = {{2+2}}”.
I have lost about 12 hours to this (I first noticed it trying to add a simple Ionic module from npm to the project, and have been going through a brutal process of elimination to get to this point)… I didn’t want it to turn out to just be me not understanding Ionic properly, but I am at the end of my tether now, and I have tried everything I could possibly imagine short of refactoring this project into something less overtly stupid and confusing.
What could I be missing? I’d love to post more code, but, like I say, the whole thing is a total mess. Just some idea of what could be causing this problem would be crazy helpful.
Just for the record, too, I have tried upgrading every dependency in the app to the latest version, but all to no avail.
I’d greatly appreciate any input from more experienced guys and gals out there! Happy to post more code/info if you can point me in the right direction of what you need.
Thanks in advance!
-Luke