我正在寻找一些可以用来帮助确定在编写新指令时使用哪种类型的范围的指南.理想情况下,我想要一个类似于流程图的东西,它会引导我解决一堆问题并弹出正确答案 - 没有新的新范围,新的子范围或新的隔离范围 - 但这可能要求太多.这是我目前微不足道的指导方针:
我知道在元素上使用带有隔离范围的指令会强制同一元素上的所有其他指令使用相同(一个)隔离范围,因此当使用隔离范围时,这不会严重限制吗？
我希望来自Angular-UI团队的一些人(或其他已写过许多指令的人)可以分享他们的经验.
请不要添加简单地说"为可重用组件使用隔离范围"的答案.
我这样处理我的问题:
ng-style="{ width: getTheValue() }"
但为了避免在控制器端具有此功能,我更愿意做这样的事情:
ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }"
我怎样才能做到这一点？
我在StackOverflow上看到了很多关于ng-transclude的问题,但是没有人用外行的术语解释它是什么.
文档中的描述如下:
指示使用包含转义的最近父指令的转换DOM的插入点的指令.
这相当令人困惑.有人能够简单地解释一下ng-transclude的目的是什么以及它可能在哪里使用？
我有一个非常简化的版本,我正在做的事情可以解决问题.
我有一个简单的directive.每当您单击一个元素时,它会添加另一个元素.但是,需要首先编译它才能正确呈现它.
我的研究引导我$compile.但是所有的例子都使用了一个复杂的结构,我真的不知道如何在这里应用.
小提琴在这里:http://jsfiddle.net/paulocoelho/fBjbP/1/
JS就在这里:
var module = angular.module('testApp', [])
.directive('test', function () {
return {
restrict: 'E',
template: '<p>{{text}}</p>',
scope: {
text: '@text'
},
link:function(scope,element){
$( element ).click(function(){
// TODO: This does not do what it's supposed to :(
$(this).parent().append("<test text='n'></test>");
});
}
};
});
Josh David Miller的解决方案:http: //jsfiddle.net/paulocoelho/fBjbP/2/
我正在尝试src从变量设置iframe 的属性,我无法让它工作......
标记:
<div class="col-xs-12" ng-controller="AppCtrl">
<ul class="">
<li ng-repeat="project in projects">
<a ng-click="setProject(project.id)" href="">{{project.url}}</a>
</li>
</ul>
<iframe ng-src="{{trustSrc(currentProject.url)}}">
Something wrong...
</iframe>
</div>
控制器/ app.js:
function AppCtrl ($scope) {
$scope.projects = {
1 : {
"id" : 1,
"name" : "Mela Sarkar",
"url" : "http://blabla.com",
"description" : "A professional portfolio site for McGill University professor Mela Sarkar."
},
2 : {
"id" : 2,
"name" : "Good Watching",
"url" : "http://goodwatching.com",
"description" : "Weekend experiment to help my …我的视图中有一个项目列表,ng-click附在它们上面:
<ul id="team-filters">
<li ng-click="foo($event, team)" ng-repeat="team in teams">
<img src="{{team.logoSmall}}" alt="{{team.name}}" title="{{team.name}}">
</li>
</ul>
我foo在我的指令中处理函数中的click事件,$event作为对已被单击的对象的引用传递,但我得到对img标记的引用,而不是li标记.然后,我必须做这样的事情来得到li:
$scope.foo = function($event, team) {
var el = (function(){
if ($event.target.nodeName === 'IMG') {
return angular.element($event.target).parent(); // get li
} else {
return angular.element($event.target); // is li
}
})();
是否有一种简单的方法来获取对ng-click绑定的元素的引用,而不在我的指令中执行DOM操作？
我正在尝试构建一个指令,负责向声明它的元素添加更多指令.例如,我想构建一个负责添加的指令datepicker,datepicker-language和ng-required="true".
如果我尝试添加这些属性然后使用$compile我显然会生成一个无限循环,所以我正在检查我是否已经添加了所需的属性:
angular.module('app')
.directive('superDirective', function ($compile, $injector) {
return {
restrict: 'A',
replace: true,
link: function compile(scope, element, attrs) {
if (element.attr('datepicker')) { // check
return;
}
element.attr('datepicker', 'someValue');
element.attr('datepicker-language', 'en');
// some more
$compile(element)(scope);
}
};
});
当然,如果我没有$compile元素,那么将设置属性但是指令不会被引导.
这种方法是正确的还是我做错了？有没有更好的方法来实现相同的行为？
UDPATE:鉴于这$compile是实现这一目标的唯一方法,有没有办法跳过第一个编译传递(该元素可能包含几个子节点)？也许通过设置terminal:true？
更新2:我已经尝试将指令放入一个select元素中,正如预期的那样,编译运行两次,这意味着预期option的数量是预期的两倍.
javascript model-view-controller mvvm angularjs angularjs-directive
我需要对范围和模板执行一些操作.似乎我可以在link函数或controller函数中执行此操作(因为它们都可以访问范围).
什么时候我必须使用link功能而不是控制器？
angular.module('myApp').directive('abc', function($timeout) {
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: true,
link: function(scope, elem, attr) { /* link function */ },
controller: function($scope, $element) { /* controller function */ }
};
}
另外,我明白这link是非角度的世界.所以,我可以使用$watch,$digest和$apply.
link当我们已经拥有控制器时,该功能有什么意义？
我认为这是我用angularjs指令理解的最难的概念之一.
来自http://docs.angularjs.org/guide/directive的文件说:
transclude - 编译元素的内容并使其可用于指令.通常与ngTransclude一起使用.翻译的优点是链接功能接收预先绑定到正确范围的翻译功能.在典型的设置中,窗口小部件创建隔离范围,但是转换不是子项,而是隔离范围的兄弟.这使得窗口小部件可以具有私有状态,并且将转换绑定到父(预隔离)范围.
- true - 转换指令的内容.
- 'element' - 转换整个元素,包括以较低优先级定义的任何指令.
它transclude通常用于ngTransclude.但是来自ngTransclude文档的样本根本不使用ngTransclude指令.
我想要一些很好的例子来帮助我理解这一点.我们为什么需要它？它解决了什么？如何使用它？
我何时应该使用transclude: 'true'何时transclude: 'element'？我无法transclude: 'element'在角度文档中找到任何相关信息,它们非常令人困惑.
如果有人能用简单的语言解释,我会很高兴.每个选项的好处是什么？它们之间真正的区别是什么？
这是我发现的:
Run Code Online (Sandbox Code Playgroud)transclude: true在编译函数中,您可以在transclude链接函数的帮助下操作DOM,或者您可以使用任何HTML标记上的ngTransclude指令将已转换的DOM插入到模板中.
和
Run Code Online (Sandbox Code Playgroud)transclude: ‘element’这将转换整个元素,并在compile函数中引入了transclude链接函数.您无法访问此范围,因为尚未创建范围.编译函数为有权访问范围的指令创建链接函数,transcludeFn允许您触摸克隆元素(已被转换)以进行DOM操作或使用绑定到范围内的数据.为了您的信息,这用于ng-repeat和ng-switch.