I've encountered an issue with a partial template that's loaded outside of my ng-view, complete with its own controller. Here's a breakdown.
Basic template layout
<html ng-app="myApp">
...
<div ng-include src="'myPartial.html'"></div>
...
<div ng-view></div>
...
<!-- script files included here -->
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="myPartialController.js"></script>
<script src="myApp.js"></script>
</html>
Main application script (myApp.js)
var app = angular.module('myApp', ['myPartialController', 'ngRoute']);
app.config(function($routeProvider) {
.when('/myUrl', {
templateUrl: 'myPartial.html',
controller:'myPartialController',
reloadOnSearch: true
})
});
Partial template file (myPartial.html)
<div class="container-fluid" ng-controller="myPartialController">
{{myVariable}}
</div>
In the controller, I'm retrieving a value from sessionStorage, performing various parsing and data manipulation tasks, and ultimately assigning the result to a $scope array variable.
Partial controller code (myPartialController.js)
angular.module('myPartialController', [])
.controller('myPartialController', ['$scope', '$rootScope', '$window', function($scope, $rootScope, $window) {
// perform necessary operations and assign result to myVariable
$scope.myVariable = myVariable;
}]);
Upon loading the partial, it displays an empty array ([]). However, upon page refresh, the correct array is shown.
It seems like 2-way binding isn't functioning as expected. What could be the issue here?