I am in the process of creating a menu that allows users to adjust the CSS on my web application. Within my JavaScript method, I take a string input and then insert it into a URI for a bootswatch CDN. The code functions properly when I manually enter a string, however, when I attempt to use a data-bound variable, things get a bit complicated. In the developer tools, I can see that the HTML displays the data-bound string as it should be. However, when I check the URI that the browser is attempting to retrieve, it is literally adding {{style}} to the URI. I am relatively new to all of this, so please excuse any major errors. I am open to all suggestions and feedback.
Below is the opening HTML tag:
<html data-ng-app="app" lang="en" data-ng-controller="MainCtrl">
Here is the controller:
app.controller('MainCtrl', function($scope) {
// setting a default for now
$scope.stylePath = '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css';
$scope.styles = ['slate', 'Cyborg', "Darkly", "journal", "Yeti"];
$scope.setStyle = function(styleName) {
$scope.stylePath = '//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/' + styleName + '/bootstrap.min.css';
};
$scope.changePath = function() {
$scope.stylePath='//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/slate/bootstrap.min.css';
};
});
As you can see, I have tried various forms of quotes and both uppercase and lowercase versions in my array. It is important to note that the changePath() function works correctly, whereas setStyle() has never functioned properly when trying to pass it a data-bound value. Providing it with a string literal presents no issues.
Here is the problematic code:
<div class="dropdown">
<a id="ThemeDropdown" class="btn btn-default" role="button" data-toggle="dropdown" title="Choose a theme">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="ThemeDropdown">
<li role="presentation" data-ng-repeat="style in styles">
<a role="menuitem" tabindex="-1" href="#/settings" ng-click="setStyle('{{style}}')">{{ style }}</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#/settings" ng-click="changePath()">hardcode slate</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="#/settings" ng-click="setStyle('darkly')">hardcode darkly</a>
</li>
</ul>
</div>
Additionally, attempting to setStyle() without using quotes around the data binding leads to a parsing error.
Error: [$parse:syntax] http://errors.angularjs.org/1.2.21/$parse/syntax?p0=style&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=12&p3=setStyle(%7B%7Bstyle%7D%7D)&p4=style%7D%7D)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:6:450
at cb.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:168:341)
at cb.consume (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:169:266)
at cb.object (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:177:45)
at cb.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:167:478)
at cb.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:174:160)
at cb.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:173:402)
at cb.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:173:262)
at cb.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:173:126) <a role="menuitem" tabindex="-1" href="#/settings" ng-click="setStyle({{style}})">
angular.js:10023
Is it feasible to achieve what I am attempting to do? What am I missing here?