Angular.js - $ scope is not interpolated
I have an Angular.js app and for some reason I cannot interpolate anything from an object $scope
to HTML. My controller is up MainCtrl
and MainFactory
running fine and I can add the graph to the html correctly, just the interpolation $scope
doesn't work. Here is the code I have:
EDIT: I am using this with the Swig view rendering engine
var app = angular.module("myapp", []);
app.controller('MainCtrl', function($scope, MainFactory) {
$scope.firstName = 'George';
console.log('scope :', $scope); // logs the $scope obj correctly but doesn't have my firstName property on it
MainFactory.fetchBacktestedDataByAllocationId()
.then(data => {
// draw and append chart - works fine
});
});
app.factory('MainFactory', function($http) {
var MainFactory = {};
MainFactory.fetchBacktestedDataByAllocationId = function() {
return $http.get('/path/to/api')
.then(response => {
return response.data;
})
};
return MainFactory;
});
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="/widget/assets/d3.version3.js"></script>
<script src="/widget/assets/backtested-growth/backtested-data-chart.js"></script>
<script src="/widget/assets/backtested-growth/backtested-growth.script.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MainCtrl">
<div style="width: 100%;">
<div id="graph-div"></div>
<br>
<p>First Name: {{ firstName }}</p>
</div>
</div>
</body>
</html>
What am I doing wrong?
source to share
It could be that any other script or view engine (if you are using it with some server rendering engine like handlebar, ejs) can use symbols as well {{
.
Try to change the angular interpolation symbol,
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
and see if it works.
source to share