Seeking assistance for integrating Codemirror with AngularJS tabs.
<p ng-bind-html="tab.content | unsafe"></p><tabset class="tab-container">
<tab id = "tabContent" ng-repeat="tab in tabs" active="tab.active">
<script>
</script>
<tab-heading>
<span>{{tab.title}}</span>
<i class="glyphicon glyphicon-remove" ng-click="removeTab($event, $index)"></i> <!-- tab close button -->
</tab-heading>
<p ng-bind-html="tab.content | unsafe"></p>
</tab>
<button class="btn btn-default" ng-click="addTab()"></button>
</tabset>
Incorporating tab.Content involves adding HTML tags around the text for textarea insertion:
var formatText = function(text){
return "<textarea ui-codemirror='cmOption' ng-model='cmModel'>" + text + "</textarea>";
}
The ui-codemirror = 'cmOption' functionality initiates this code block:
$scope.cmOption = {
lineNumbers: true,
indentWithTabs: true,
onLoad : function(_cm){
console.log("loaded");
$scope.modeChanged = function(){
console.log("loaded");
_cm.setOption("mode", $scope.mode.toLowerCase());
};
}
};
While adding a breakpoint at $scope.cmOption works, setting one at the onLoad function remains untouched.
Appreciate your time and assistance in dealing with this challenge.