我在 tab1 中有 3 个按钮,在 tab2 中有 3 个 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代码
$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;
});
};