Let me set the scene:
Here are snippets from both the JS file main.js and the HTML file index.html:
angular.module("myApp", []);
angular.module("myApp", []).controller("postController", function($scope) {
$scope.buttonName = "Post";
})
angular.module("myApp", []).controller("myController", function($scope) {
$scope.ButtonStatus = "OFF";
$scope.myStyle = buttonGreen; //{'background-color':'#00FF00', 'font-size': '24px', 'width': '80px'}
$scope.toggleRelay = function(){
if($scope.ButtonStatus == "OFF")
{
$scope.ButtonStatus = "ON";
$scope.myStyle = buttonRed;
}
else
{
$scope.ButtonStatus = "OFF";
$scope.myStyle = buttonGreen;
}
}
})
<body ng-app="myApp">
<h1 id="the-header">Welcome to home electricity manager!</h1>
<div add-row ng-controller="myController" style="text-align: center; display: inline-block;">
<span style="white-space:pre;">Button text</span><br/>
<button id="first-button" ng-style="myStyle" ng-click="toggleRelay()" id="switch-circuit-1">{{ButtonStatus}}</button>
</div>
<div add-row ng-controller="myController" style="text-align: center; display: inline-block;">
<span id="second-button" style="white-space:pre;">{{buttonOneText}}</span><br/>
<button ng-style="myStyle" ng-click="toggleRelay()" id="switch-circuit-1">{{ButtonStatus}}</button>
</div>
<div ng-controller="postController" style="text-align: center; display: inline-block;">
<button>ASSS</button>
</div>
</body>
Upon running this code, I encountered this error. The objective was to use two controllers within the same app, but it appears to be causing issues. Removing the postController resolves the problem. I've explored various resources on incorporating multiple controllers in a single app, but none seem to work for my particular setup.