I'm trying to integrate angular 1.3 with NodeBB as we need are looking for options to integrate it with our angular application with some customization. However, angular controller objects are not recognized in tpl files and I'm guessing that it's looking for those objects in respective js files instead of looking at angular scopes.
I've included angular in header.tpl and tried to initialized ng-app on a div tag.
How to achieve this?
Code snippet -
<head>
<title>{browserTitle}</title>
<!-- BEGIN metaTags -->{function.buildMetaTag}<!-- END metaTags -->
<link rel="stylesheet" type="text/css" href="{relative_path}/assets/stylesheet.css?{config.cache-buster}" />
<!-- IF bootswatchCSS --><link id="bootswatchCSS" href="{bootswatchCSS}" rel="stylesheet" media="screen"><!-- ENDIF bootswatchCSS -->
<!-- BEGIN linkTags -->{function.buildLinkTag}<!-- END linkTags -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script>
var RELATIVE_PATH = "{relative_path}";
var config = JSON.parse('{{configJSON}}');
var app = {
template: "{template.name}",
user: JSON.parse('{{userJSON}}')
};
var myApp = angular.module('spicyApp1', []);
myApp.controller('SpicyController', ['$scope', function($scope) {
$scope.spice = 'very';
$scope.chiliSpicy = function() {
$scope.spice = 'chili';
};
$scope.jalapenoSpicy = function() {
$scope.spice = 'jalapeño';
};
}]);
</script>
<script src="{relative_path}/assets/nodebb.min.js?{config.cache-buster}"></script>
<!-- BEGIN scripts -->
<script type="text/javascript" src="{scripts.src}"></script>
<!-- END scripts -->
<!-- IF useCustomJS -->
{{customJS}}
<!-- ENDIF useCustomJS -->
<!-- IF useCustomCSS -->
<style type="text/css">{{customCSS}}</style>
<!-- ENDIF useCustomCSS -->
</head>
<body class="{bodyClass} skin-{config.bootswatchSkin}" ng-app="spicyApp1">
<div>
<div ng-controller="SpicyController">
{{SpicyController}}
</div>
</div>
