Angular.js - $scope not being interpolated
Question
I have an Angular.js app and for some reason I cannot interpolate out anything on the $scope object into the HTML. My MainCtrl controller and MainFactory work fine together and I can append a graph to the html properly, just interpolating the $scope is not working. Here is the code that I currently have:
EDIT: I am using this with the view rendering engine Swig
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?
1 answers
solution1
2 ACCPTED 2017-05-19 14:33:25
It could be that any other script or view-engine (if you are using it with some server rendering engine like handlebar, ejs) may also be using symbols {{ .
Try changing angular interpolation symbol with this,
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
and see if that works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.