Questions tagged «angularjs-directive»

AngularJS指令是通过扩展HTML词汇表来教授HTML新技巧的一种方法。指令允许您以声明性模式管理DOM元素,从而使您摆脱了底层DOM操作任务的束缚。

18
AngularJS指令范围中的'@'和'='有什么区别?
我已经仔细阅读了有关该主题的AngularJS文档,然后摆弄了一条指令。这是小提琴。 以下是一些相关的摘要: 从HTML: <pane bi-title="title" title="{{title}}">{{text}}</pane> 从窗格指令: scope: { biTitle: '=', title: '@', bar: '=' }, 有几件事我没有得到: 为什么必须"{{title}}"与'@'和"title"一起使用'='? 我是否还可以直接访问父范围,而不用属性装饰元素? 该文档说:“通常希望通过表达式将数据从隔离的范围传递到父范围”,但这似乎也可以与双向绑定一起使用。为什么表达途径会更好? 我发现了另一个小提琴,它也显示了表达式解决方案:http : //jsfiddle.net/maxisam/QrCXh/

30
如何设置对输入字段的关注?
在AngularJS中将焦点设置在输入字段上的“角度方式”是什么? 更具体的要求: 当一个模态被打开,在一组预定义的焦点<input>这里面模态。 每次<input>都可见(例如,通过单击某些按钮),将焦点放在其上。 我试图达到第一个要求有autofocus,但只有当模态被打开的第一次,只有在特定的浏览器(如Firefox中这是行不通的)这个作品。 任何帮助将不胜感激。

6
链接vs编译vs控制器
创建指令时,可以将代码放入编译器,链接函数或控制器中。 在文档中,他们解释说: 编译和链接功能用于角度循环的不同阶段 指令之间共享控制器 但是,对我来说,不清楚哪种代码应该放在哪里。 例如:我可以在编译中创建函数并将它们附加到链接的作用域中,还是仅将函数附加到控制器的作用域中? 如果每个指令可以有自己的控制器,则如何在指令之间共享控制器?控制器是真正共享的还是仅仅是作用域属性?


8
Angular指令-何时以及如何使用编译,控制器,预链接和后链接[关闭]
关闭。此问题不符合堆栈溢出准则。它当前不接受答案。 想改善这个问题吗? 更新问题,使其成为Stack Overflow 的主题。 5年前关闭。 编写Angular指令时,可以使用以下任何函数来操纵DOM的行为,声明该指令的元素的内容和外观: 编译 控制者 预链接 链接后 关于应该使用哪个功能似乎有些混乱。这个问题包括: 指令基础 如何声明各种功能? 源模板和实例模板有什么区别? 指令功能按什么顺序执行? 这些函数调用之间还会发生什么? 功能性质,做与不做 编译 控制者 预先连结 链接后 相关问题: 指令:链接vs编译vs控制器。 定义angular.js指令时,“控制器”,“链接”和“编译”函数之间的差异。 angularjs中的compile和link函数有什么区别? AngularJS指令中的预编译和后编译元素之间的区别?。 Angular JS指令-模板,编译或链接?。 Angular js指令中的post link和pre link。

19
如何在AngularJS中使用按键事件?
我想在下面的文本框中捕获Enter键按下事件。为了更清楚地说明,我使用a ng-repeat来填充tbody。这是HTML: <td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield" data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td> 这是我的模块: angular.module('components', ['ngResource']); 我正在使用一种资源来填充表,而我的控制器代码是: function Ajaxy($scope, $resource) { //controller which has resource to populate the table }

6
如何在AngularJS中的自定义指令*中使用自己的作用域*访问父作用域?
我正在寻找访问指令中“父”范围的任何方式。范围,超越,要求,从上方传入变量(或范围本身)的任何组合,等等。我完全愿意向后弯腰,但我想避免某些完全不可靠或无法维护的事情。例如,我知道我现在可以通过$scope从preLink参数中获取并对其$sibling范围进行迭代以找到概念上的“父级” 来做到这一点。 我真正想要的是能够$watch在父作用域中表达。如果我可以做到,那么我可以在这里完成我想做的事情: AngularJS-如何用变量渲染局部变量? 重要说明是,该指令必须在同一父范围内可重复使用。因此,默认行为(作用域:false)对我不起作用。我需要为指令的每个实例设置一个单独的作用域,然后需要$watch一个位于父作用域中的变量。 一个代码示例价值1000个字,因此: app.directive('watchingMyParentScope', function() { return { require: /* ? */, scope: /* ? */, transclude: /* ? */, controller: /* ? */, compile: function(el,attr,trans) { // Can I get the $parent from the transclusion function somehow? return { pre: function($s, $e, $a, parentControl) { // …


13
如何调用AngularJS指令中定义的方法?
我有一个指令,这是代码: .directive('map', function() { return { restrict: 'E', replace: true, template: '<div></div>', link: function($scope, element, attrs) { var center = new google.maps.LatLng(50.1, 14.4); $scope.map_options = { zoom: 14, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }; // create map var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options); var dirService= new google.maps.DirectionsService(); var dirRenderer= new google.maps.DirectionsRenderer() …

13
有条件地在AngularJS中应用属性的最佳方法是什么?
我需要能够基于作用域上的布尔变量向元素添加例如“ contenteditable”。 使用示例: <h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1> 如果$scope.editMode设置为,将导致contenteditable = true被添加到元素true。有一些简单的方法可以实现这种ng-class这样的属性行为吗?我正在考虑编写指令,如果没有,请共享。 编辑: 我可以看到我提议的attrs指令和ng-bind-attrs之间似乎有些相似之处,但是在1.0.0.rc3中将其删除了,为什么呢?


2
什么是ng-transclude?
我在StackOverflow上讨论ng-transclude时看到了很多问题,但没有人用外行的术语解释它是什么。 文档中的描述如下: 指令,该指令标记最近的使用转写的父指令的已转写DOM的插入点。 这相当令人困惑。有人能够用简单的术语来解释ng-transclude打算做什么以及可以在哪里使用吗?

5
在AngularJS中编写指令时,如何确定是否不需要新的作用域,新的子作用域或新的隔离作用域?
我正在寻找一些指南,可以用来帮助确定编写新指令时要使用的范围类型。理想情况下,我想要类似于流程图的内容,该流程图将引导我解决一系列问题并弹出正确的答案-没有新的新作用域,新的子作用域或新的孤立作用域-但这可能要求太多。这是我目前微不足道的指导原则: 如果将使用指令的元素使用ng-model,请不要使用隔离范围。 请参见我可以将ng-model与隔离范围一起使用吗?以及 为什么格式化程序不适用于隔离范围? 如果指令不修改任何范围/模型属性,请不要创建新的范围 如果伪指令封装了一组DOM元素(文档中说“复杂的DOM结构”),并且该伪指令将用作一个元素,或者在同一元素上没有其他伪指令,则隔离作用域似乎工作良好。 我知道在某个元素上使用具有隔离范围的指令会强制同一元素上的所有其他指令使用相同的(一个)隔离范围,因此在可以使用隔离范围时这不会严格限制吗? 我希望Angular-UI团队中的一些人(或编写了许多指令的其他人)可以分享他们的经验。 请不要添加简单的回答“对可重用组件使用隔离范围”。

6
如何从AngularJS中的变量设置iframe src属性
我正在尝试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 …

7
如何在AngularJS中动态添加指令?
我正在做的事情非常精简,可以解决问题。 我有一个简单的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 …

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.