所以我有一个页面，其中一个脚本允许用户将内容复制到剪贴板，然后是另一个角度脚本，用于切换文本编辑器的显示。这里的问题是如果选择“添加备注”按钮（称为ng-click =“showEditor”），则复制到剪贴板功能将停止工作。不确定为什么要取消另一个。代码：
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74074881-2', 'auto');
ga('send', 'pageview');
</script>
<style type="text/css">
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
</style>
<div class="container-fluid" style="font-family: Segoe UI; padding: 0;">
<div style="background-color: #0070c0; min-height:100px;">
<h1 style="color: #ffffff; font-size: 24px; padding-left:20px; padding-top: 30px;">Problem Phase Worksheet</h1>
<span style="float: right; font-size: 14px;"><a href="https://www.moneyball.ms/" target="_self" style="color: #ffffff; padding-right: 25px;">Return to Moneyball Site</a></span>
</div>
<form class="form-horizontal" autocomplete="off" role="form" style="padding-left: 20px; padding-top: 20px;">
<div class="col-md-4">
<div class="form-group">
<span style="color: #0070c0; font-size: 20px;">Inputs</span>
</div>
<div class="form-group">
<label class="control-label" for="criteria" style="font-size: 18px; padding-bottom: 10px;">Criteria:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" The threshold at which your hypothesis is considered to be true or false.
Examples: “More than 80%”, “Three quarter (75%)”, “Majority (51%-100%)”
"></i></span>
<input type="text" class="form-control" id="criteria" ng-model="criteria" style="font-size: 18px;" placeholder="(e.g. more than 80%)">
</div>
<div class="form-group">
<label class="control-label" for="customer" style="font-size: 18px; padding-bottom: 10px;">Customer:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" A type of people or organizations to whom eventually you want to offer your product. Note, that sometime in big organizations there is a difference between buyers who purchase a product and end-users who actually use the product.
Examples: “Enterprise system admins”, “Enterprise IT managers”, “Startup developers”, “Academia Data Scientists”
"></i></span>
<input type="text" class="form-control" id="customer" ng-model="customer" style="font-size: 18px;" placeholder="(e.g. enterprise system admins)">
</div>
<div class="form-group">
<label class="control-label" for="task" style="font-size: 18px; padding-bottom: 10px;">Job to be done:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" The main task for which customers “hire” products and services to get a “job” done. A framework that has been popularized by Clayton Christensen and Anthony Ulwick.
Examples:
“Keeping their servers up to date”, “Planning infrastructure capacity”, “Deploying a mobile app”, “Preparing database for analysis”
"></i></span>
<input type="text" class="form-control" id="task" ng-model="task" style="font-size: 18px;" placeholder="(e.g. keeping servers up to date)">
</div>
<div class="form-group">
<label class="control-label" for="problem" style="font-size: 18px; padding-bottom: 10px;">Problem:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" The major challenge that customers are facing when performing their Job-To-Be-Done. Note that the problem description needs to be specific and measurable. This can help to estimate a size of the problem and it also can be used as a benchmark for a value proposition provided by your new product.
Examples:
“It takes too long (more than 24 hours)”, “It costs too much (more than $10,000)”, “It require too many tools (five)”
"></i></span>
<input type="text" class="form-control" id="problem" ng-model="problem" style="font-size: 18px;" placeholder="(e.g. it takes to long (24+ hours) )">
</div>
</div>
<div class="col-md-6">
<div>
<span style="color: #0070c0; font-size: 20px;">Examples</span>
<a id="btnPrint" class="btn btn-primary" style="float: right; font-size: 18px;">
<span><i class="fa fa-print" aria-hidden="true"></i></span> Print
</a>
<a class="btn btn-primary" style="float: right; font-size: 18px; margin-right: 10px;" uib-tooltip="copy to clipboard" ngclipboard data-clipboard-target="#printThis" ng-click="steps.copyToast()">
<span><i class="fa fa-files-o" aria-hidden="true"></i></span> Copy
</a>
</div>
<div id="printThis" style="background-color: #ffffff; padding: 15px; margin-top: 20px; border: 1px solid #ccc; border-radius: 8px;" ng-model="problemExp"> <div>
<p style="font-size: 18px; color: #afabab; font-weight: 600;">HYPOTHESIS</p>
<p style="font-size: 18px;" id="hypCriteria">We believe that <span style="color: blue;">{{ criteria || '[criteria]' }}</span> of <span style="color: blue;">{{ (customer != null) ? customer : '[customer]' }}</span> are most frustrated about <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span> because <span style="color: blue;">{{ problem || '[problem]' }}</span>.</p>
</div>
<div>
<p style="font-size: 18px; color: #afabab; font-weight: 600; margin-top: 25px;">CUSTOMER: SCREENING CRITERIA:</p>
<p style="font-size: 18px;">We are looking for <span style="color: blue;">{{ (customer != null) ? customer : '[customer]' }}</span> who are regularly involved in <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>.</p>
</div>
<div>
<p style="font-size: 18px; color: #afabab; font-weight: 600; margin-top: 25px;">EXPERIMENT: INTERVIEW QUESTIONS:</p>
<p style="font-size: 18px;">Thank you for your time and interest in sharing your experiences. You are the expert. We are here to learn from you. I’m going to talk as little as possible.</p>
<a class="btn btn-primary" style="font-size: 18px; margin-bottom: 10px;" ng-click="showEditor()">
<span><i class="fa fa-pencil-square-o" aria-hidden="true"></i></span> Add Notes
</a>
<p style="font-size: 18px;">1. Tell me who is involved in <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span> at your company?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">2. How often are you personally involved in <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">3. Tell me about the last time when you did <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>.</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">4. What were the major challenges when you were this task?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">5. Which of these challenges did you find most frustrating?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">6. On a scale of 0-10 (where 10 is extremely frustrating), how frustrating was this experience? Why?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">7. Have you done anything to work around these challenges? What?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">8. If so, how well did that solve your problem? Why/why not?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">9. If you could wave a magic wand and be able to do anything about <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span> in your daily job, what would it be?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">10. What would this allow you to achieve?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">11. Who do you know that I should also be talking with? Who else cares a lot about <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">12. I’ve learned so much from you! Can I ask for your feedback in the future?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
</div>
</div>
</div>
</form>
</div>
节目编辑器脚本很简单：
$scope.isHidden = true;
$scope.showEditor = function () {
$scope.isHidden = $scope.isHidden ? false : true;
}
复制到剪贴板是第三方称为ng-clipboard。 show editor脚本位于此视图的控制器中。
请提出任何想法或建议吗？
非常感谢。