我为redactor编写了一个指令(一个所见即所得的编辑器).它在一些黑客攻击后起作用,但我想找到正确的方法.对我来说,主要的挑战是ng-model和redactor jquery插件之间的双向绑定.我从wysiwyg编辑器中听取keyup和命令事件并更新模型.我还从redactor编辑器外部观察模型更改,以便我可以相应地更新redactor编辑器.棘手的部分是:如何忽略反应堆编辑器强加的ng模型变化(从绑定的前半部分开始)？
在下面的代码中,它会记住redactor编辑器更新到模型的最后一个值,如果模型的新值等于最后一个值,则忽略模型更改.我真的不确定这是否是实现这一目标的正确方法.在我看来,这是Angular中双向绑定的常见问题,必须有正确的方法.谢谢!
<textarea ui-redactor='{minHeight: 500}' ng-model='content'></textarea>
directive.coffee(对不起coffeescript)
angular.module("ui.directives").directive "uiRedactor", ->
require: "ngModel"
link: (scope, elm, attrs, ngModel) ->
redactor = null
updatedVal = null
updateModel = ->
ngModel.$setViewValue updatedVal = elm.val()
scope.$apply()
options =
execCommandCallback: updateModel
keydownCallback: updateModel
keyupCallback: updateModel
optionsInAttr = if attrs.uiRedactor then scope.$eval(attrs.uiRedactor) else {}
angular.extend options, optionsInAttr
setTimeout ->
redactor = elm.redactor options
#watch external model change
scope.$watch attrs.ngModel, (newVal) ->
if redactor? and updatedVal isnt newVal
redactor.setCode(ngModel.$viewValue or '')
updatedVal = newVal
需要将标签保留在页面上 - 始终位于页面的正面.如果你单击一个,两个就可以了,但是当你点击三个页面时,滚动就会出现在标签上方.我怎样才能保留前面的标签？
这是我的jsfiddle链接 http://jsfiddle.net/97tbk/737/
这是代码
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fullpage"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div id="fullpage">
<div class="section">One</div>
<div class="section">
<div class="slide">Two 1</div>
<div class="slide">Two 2</div>
</div>
<div class="section">Three</div>
<div class="section">Four</div>
</div>
</div>
因此，我一直在尝试构建一种很好的方式来表示应用程序中的分层数据。我为一些引导徽章创建了幻灯片效果，这些引导徽章用于使用AngularJS显示一些子类别。
我已经创建了以下示例（在您的stackoverflow-ers的帮助下！），该示例适用于父和子类型的数据。即。您不能同时成为父母和孩子，这是我的真实示例。
<ul>
<li ng-repeat="category in categories"
ng-init="isChild = category.category_type == 'child'"
ng-show="category.category_show"
class="badge-slider">
<span class="badge {{ isChild ? 'badge-c' : 'badge-p' }}"
ng-click="isChild || updateResults(category)"
ng-bind="category.category_name">
</span>
</li>
</ul>
我正在努力了解更改代码的最佳方法是什么，以便它能够用于其他“父级和子级” category_type。创建浏览目录结构的方式需要此“父级和子级” category_type。
在上面的示例中，它依赖于布尔值'isChild'和三元运算符，当我们引入'parent and child'category_type时，该运算符不起作用。
任何人有任何想法吗？
以下是指向PLNKR的链接，该链接演示了用于简化父子关系的滑动功能：http : //plnkr.co/edit/9CiXW1YAoPj80x6PtBW3
编辑1：
我创建了另一个PLNKR来处理层次关系的3层性质。它可以正常工作，只是它不显示带有相应徽章的“父项和子项”元素。... http : //plnkr.co/edit/YoRI578GHE91t6torCUt
我在代码的注释中添加了一个超链接，以供将来参考。通过从 Safari 复制 url，然后将其粘贴到 Xcode 中来添加超链接。
问题是，现在我无法控制超链接，因为它已粘贴到我的代码中，并且在添加其他文本时正在对其进行修改。
Example URL: https://link.to.resource/DID/
How I want the link to be displayed: Device ID (listed in https://link.to.resource/DID/.)
如何在不修改链接位置的情况下添加附加文本？当我添加./到末尾时，它成为链接的一部分，并且该地址不再有效。
我有3个指令,它们具有稍微不同的算法来解析输入值.
angular.module('numeric', []).directive('doublesrange', function() {...} );
angular.module('numeric', []).directive('integersrange', function() {...} );
angular.module('numeric', []).directive('doublesnorange', function() {...} );
它们基本上从文本框中解析值.
<td><input ng-model="odSphere" class="doublesnorange" minvalue="-25" maxvalue="25"></td>
问题是,只有'doublesnorange'正在响应.我在开发过程中看到了所有三个工作,但是当我添加第三个工作时,另外两个工作停止了.当我解除这些变化时,他们也没有回应.
指令内容正常,如果我将'doublesnorange'置于'doublesnorange'之下,它将执行.有人知道为什么前两个会不回应吗？
这是我的html代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="chat">
<div ng-controller="chatCtrl">
<div ng-repeat="i in chatResult">
{{i.first_name}}
{{i.last_name}}
{{i.id}}
{{i.age}}
</div>
<input type="text" ng-model="message">{{message}}
<input type="text" ng-model="username">{{username}}
<button ng-click="saveData()">Submit</button>
</div>
<script src="static/jquery.js"></script>
<script src="static/angular.min.js"></script>
<script src="static/app.js"></script>
</body>
</html>
在上面的html代码当我按下提交按钮时,ng-click功能没有响应.
这是我的app.js
var chat = angular.module('chat', [])
chat.controller('chatCtrl', function($scope,$http){
$scope.chatResult = null;
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencsoded";
$http.get('http://localhost:3000/chat').success(function(result){
$scope.chatResult = result;
});
$scope.message = '';
$scope.username = '';
$scope.saveData = function(){
$console.log('save data function');
$http.post('http://localhost:3000/save/chat/data', {message:$scope.message, username:$scope.username}).
success(function(result){
$console.log(result);
});
}
});
单击提交按钮时,我调用角度单击事件来触发saveData函数.
但在我的情况下,我的代码中没有任何问题......
我创建的指令使用函数setFormatting来屏蔽输入字段中的文本值.
scope.$watch(element, function() {
modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
modelCtrl.$render();
});
element.bind('blur', function() {
modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
modelCtrl.$render();
});
范围.$ watch在第一次加载/应用内容时应用蒙版,element.bind为其他时间应用蒙版.范围.$ watch存储符号(如果有的话)作为ng-model变量的一部分.element.bind不是.我以为$ setViewValue()和$ render()没有更新ng-model变量.变量在哪里更新？
请参阅随附的小提琴:http
://jsfiddle.net/PJ3M4/
谢谢.
使用John Lindquist创建的YouTube教程,我能够使用模板创建指令.见小提琴:http://jsfiddle.net/37PSs/
现在,我想使用属性的值作为函数调用的变量.像这样的东西:
html:
<hello-world name="World"></hello-world>
javascript - directive:
template: '<span>myFunction({{name}})</span>'
javascript - myFunction(theirName):
return ("Hello, " + String(theirName) + "!");
我能得到的最接近的是将[对象窗口]传递给我的函数.
我有一个指令.它需要ngModel,并且在链接中,我应该能够使用modelCtrl参数$setViewValue();并$render();结合使用返回更改输入字段中的值并更新存储的值ngModel.不幸的是,当我通过modelCtrl了我的逻辑功能,我不能用$setViewValue();和$render();,即使我传递modelCtrl给函数.(见小提琴:http://jsfiddle.net/GSTC5/1/)
myApp.directive('demo', function() {
return {
require: 'ngModel',
restrict: 'EACM',
link: function(scope, element, attrs, modelCtrl) {
setAndRender(modelCtrl, "12345");
modelCtrl.$parsers.push(function(inputValue) {
return logic(inputValue, modelCtrl);
});
}
};
});
在我写的另一个指令中有一些非常相似的东西,为什么它在这里失败？
更新
我认为错误在于$setViewValue().我知道它从链接函数调用它时会响应,但是$setViewValue当从逻辑函数调用代码时会阻止代码运行.
我正在使用 highcharts 并且我喜欢它们，但我的问题是，当我添加使用圆角插件时，如果我有一个包含 0 的堆叠图表，则不会应用半径。
问题： 看一下六月和七月。
目标：在这种情况下，我需要一种方法将半径分配给六月的左侧和七月的右侧。
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'normal',
animation: false
}
},
series: [
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 0, 148.5, 216.4, 194.1, 95.6, 54.4],
// usage:
borderRadiusTopLeft: 5,
borderRadiusTopRight: 5
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, …