我正在经历创建指令的过程.经历了一些起伏后,我完成了创建指令(widget)并完成指令将采用的各种属性.
我使用了各种可用的选项,如属性,绑定,评估,表达等.
我想的是,如果你想创建一个通用组件,你永远不会告诉人们如何将值传递给组件.
这是一个例子......
你正在创建一个新的元素组件..说
<hello name="__ARGUMENT__"></hello>
hello的name属性是其中唯一的变量.如果你向公众公开......这些是人们可能使用这个组件的可能场景.
情况1 :
<hello name="angular"></hello>
案例2:
<hello name="{{name}}"></hello>
案例3:
<div ng-repeat="name in names">
<hello name="name"></hello>
</div>
现在..针对不同的场景..我已经了解了提供的各种选项.我想不出一个你想要'属性'的场景,因为它简单地直接将值从组件替换到模板.
在您的指令定义中,如果您将名称定义为'evaluate'而不是'attribute'
如果属性:
<hello name="angular"></hello>
如果评估:
<hello name="'angular'"></hello>
请注意额外的单引号..
所以据我所知,评估涵盖了什么属性.并且,使用evaluate似乎是一个更好的选择,而不仅仅是属性,因为它涵盖了更多的场景!
如果有人能够解释为什么属性存在于第一位？更多选择=更多混乱.. :)
Angular为我们提供了一种编写指令的机制 - 它的功能非常强大.但我一直想知道的是 - 在什么情况下你应该实际编写自己的自定义指令.
我们不断看到Stack Overflow及其周围的问题,各种各样的人试图编写指令(我认为)不需要首先编写.在大多数情况下,它们可以通过重复,切换和显示的组合来解决.请参阅包含我认为不应该是指令的指令的问题示例!
angularjs:在ui-bootstrap模式中使用指令
一些示例场景.无论如何我都不会选择它们.因为我确信当我们应该使用/编写指令时,任何人都不清楚.
我们看到人们使用指令作为模板机制的场景.这是正确的做事方式吗？或者,还有更好的方法？(ng-include可能？)使用指令作为模板机制是否有任何好处/缺点？这个问题的原因是有时候我想知道人们是否编写指令因为来自jquery世界他们能想到的第一件事就是编写DOM操作代码,因为Angular方法是不操纵控制器中的DOM所有都倾向于写作指令中的所有代码.
编辑:
我相信这种混淆(在指令中推送内容)会产生,因为Angular没有单独的"视图"概念 - 不像Backbone(它只有一个"视图"但没有组件!).指令在定义组件方面是惊人的 - 但我认为如果你使用它们创建"视图",你将失去一些"有角度"的方式.这是我的意见 - 这就是为什么我要征求其他角度社区的想法.
简单指令(只做一件事的指令!)的好处是它们绝对容易测试.如果你看看所有的ng指令,他们都会做一件事并做得很好.
在Angular中定义可重用"视图"(不是组件!)的最佳方法是什么？这应该写在指令中吗？或者,还有更好的方法？
如果其中一个Angular Dev在这件事上有意见,那就太棒了!
我似乎无法弄清楚为什么样式属性没有得到更新.在我更大的应用程序中它似乎工作正常.
angular.module('Model', [])
.factory('SizeModel', function () {
return {
width: 200,
height: 100,
display:"block",
getCombined: function() {
return parseInt(this.width) + parseInt(this.height);
}
};
});
function AlbumCtrl($scope,SizeModel) {
$scope.master = SizeModel;
$scope.$watch("master",function(){
$scope.myprop = { display: $scope.master.display,
backgroundColor: "#333",
width: $scope.master.width+'px',
height: $scope.master.height+'px',
color: "#FFF"
};
});
}
function AnoCtrl($scope,SizeModel) {
$scope.master = SizeModel;
$scope.toggle = function(){
$scope.master.display = "none";
}
}
function EditCtrl($scope,SizeModel) {
$scope.master = SizeModel;
}
http://jsfiddle.net/ganarajpr/C2hRa/4/
这是一个小提琴,显示了我目前面临的问题.您会注意到更改输入时,div中的宽度和高度会更新.但风格本身似乎并没有更新.谁能告诉我这里做错了什么？
我尝试了以下所有方案
我有一个人们在3d空间中使用转换时遇到的最常见的问题.问题是在3d中转换的内容变得模糊.
现在解决这个问题有一个着名的解决方案.
即假设对象是mc.
mc.transform.matrix3d = null;
动画结束后,您可以将movieclip的3d矩阵设置为null.这解决了问题,但是当动画完成并且matrix3d无效时,您会看到一个明确的抽搐.
在flashandmath中定义的解决方案之一是
http://www.flashandmath.com/flashcs4/blursol/index.html
但这对我来说效果不错.
如果有人有更好的解决方案可以全面运作(没有任何混蛋!),请让社区知道!
我在Dojo有一个奇怪的问题.我的domStyle.set没有按预期工作.我假设它是将样式设置为dom节点的正确方法.
这是描述dom节点的html片段.
<div class="edgePanel" data-dojo-type="dijit.layout.BorderContainer" style="display: table-cell; min- height:70%;" data-dojo-props="region: 'center'">
<div style="display: table; width:100%; height: 100%">
<div style="display: table-row">
<div style="display: table-cell; vertical-align: middle; text-align: center">
<div id="da" name="da" style="background-color: #FFFFFF;width:300px;height:250px; display: inline-block; vertical-align: middle;">
</div>
</div>
</div>
</div>
</div>
da节点是绘图区域节点.我试图用这个javascript文件中的代码更改绘图区域节点的大小.我已经设置了一个调试点,它进入了domStyle.set位置.所以,这不是我绝对愚蠢的情况:)
define(['dojo/_base/declare','../util/XMLLoader',"dojo/query",'dojo/_base/lang',
'dijit/registry','dojo/on',"dojo/dom-style", 'dojo/domReady!'], function (declare,XMLLoader,query,lang,registry,on,domStyle) {
return declare(null, {
setup : function(){
var loader = new XMLLoader();
loader.load("example.xml","editor");
this.resizeDrawingArea();
var selector = query("#sizeSelect")[0];
on(selector,"change",lang.hitch(this,"resizeDrawingArea"));
//
},
resizeDrawingArea : function (evt){
var drawArea = query("#da");
var selector = query("#sizeSelect")[0]; …