我在tab1中有3个按钮,在tab2中我有3个codemirror文本区域。 现在实际上我想要的是在每次点击按钮时更新codemirror。 它也在更新,但是在我进入第二个选项卡并单击codemirror区域之后。 我希望它仅在按钮点击时更新。
这是我的codemirror代码。 Html代码
<div id="aCDialog" class="col-lg-12">
<div class="comment-tabs">
<ul>
<li class="active" id=""><a role="tab" data-toggle="tab" data-target="#aButton">Buttons</a></li>
<li class="" id=""><a role="tab" data-toggle="tab" data-target="#aData">Data</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="aButton">
<button id="b1" ng-click="selectButton('f1')"></button>
<button id="b2" ng-click="selectButton('f2')"></button>
<button id="b3" ng-click="selectButton('f3')"></button>
</div>
<div class="tab-pane active" id="aData">
<ui-codemirror ui-codemirror="editorOptions" id="htmlRefresh" ui-refesh="true" ng-model="uiCode.htmlcodeModel"></ui-codemirror>
<ui-codemirror ui-codemirror-opts="jsEditorOptions" ui-refesh="true" ng-model="uiCode.jsACCodeModel"></ui-codemirror>
<ui-codemirror ui-codemirror-opts="cssEditorOptions" ui-refesh="true" ng-model="uiCode.cssCode"></ui-codemirror>
</div>
</div>
</div>
</div>
js Code
$scope.editorOptions = {
mode: mixedMode,
lineNumbers: true,
lineWrapping : true,
autoRefresh:true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
};
$scope.jsEditorOptions = {
mode: 'text/javascript',
lineNumbers: true,
lineWrapping : true,
autoRefresh:true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
};
$scope.cssEditorOptions= {
mode: 'text/css',
lineNumbers: true,
lineWrapping : true,
autoRefresh:true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
};
$scope.selectButton = function(filename){
commonCall.getSelectedData(filename).success(function(data) {
$scope.uiCode.htmlcodeModel=data.html;
$scope.uiCode.jsACCodeModel=data.js;
$scope.uiCode.cssCode=data.css;
});
};