Questions tagged «angularjs-directive»

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

9
选择输入焦点上的文本
我有文字输入。当输入获得焦点时，我想选择输入内的文本。 使用jQuery，我可以这样： <input type="text" value="test" /> $("input[type=text]").click(function() { $(this).select(); // would select "test" in this example }); 我四处搜寻以尝试找到Angular方法，但是我发现的大多数示例都在处理一个指令，该指令正在监视模式属性的更改。我假设我需要一个指令来监视接收焦点的输入。我该怎么办？
4
来自其他控制器的指令控制器中的调用方法
我有一个具有自己的控制器的指令。请参见以下代码： var popdown = angular.module('xModules',[]); popdown.directive('popdown', function () { var PopdownController = function ($scope) { this.scope = $scope; } PopdownController.prototype = { show:function (message, type) { this.scope.message = message; this.scope.type = type; }, hide:function () { this.scope.message = ''; this.scope.type = ''; } } var linkFn = function (scope, lElement, …
4
角度变化延迟
我有一个输入，可以根据更改过滤ng-repeat列表。重复数据包含大量数据，并且需要花费几秒钟来过滤所有内容。我希望它们在开始过滤过程之前有0.5秒的延迟。产生延迟的正确方法是什么？ 输入值 <input ng-model="xyz" ng-change="FilterByName()" /> 重复 <div ng-repeat"foo in bar"> <p>{{foo.bar}}</p> </div> 过滤功能 $scope.FilterByName = function () { //Filtering Stuff Here }); 谢谢
5
扩展角度指令
我想对第3方指令（特别是Angular UI Bootstrap）进行较小的修改。我只是想添加pane指令的范围： angular.module('ui.bootstrap.tabs', []) .controller('TabsController', ['$scope', '$element', function($scope, $element) { // various methods }]) .directive('tabs', function() { return { // etc... }; }) .directive('pane', ['$parse', function($parse) { return { require: '^tabs', restrict: 'EA', transclude: true, scope:{ heading:'@', disabled:'@' // <- ADDED SCOPE PROPERTY HERE }, link: function(scope, element, attrs, …
3
如何使用jqLit​​e通过类名选择元素？
我试图从我的Angular.js应用程序中删除jquery，以使其更轻巧，而改用Angular的jqLit​​e。但是该应用程序大量使用了jqLit​​e不支持的find（'＃id'）和find（'。classname'），仅使用了“标签名称”（根据文档） 想知道您认为改变它的最佳方法是什么。我考虑过的一种方法是创建自定义HTML标签。例如：更改 <span class="btn btn-large" id="add-to-bag">Add to bag</span> 至 <a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b> 和 $element.find('#add-to-bag') 至 $element.find('a2b') 有什么想法吗？其他想法？ 谢谢 骗子
7
在属性中指定的angularjs指令调用函数并向其传递参数
我想创建一个链接到属性的指令。该属性指定应在范围上调用的函数。但我也想将参数传递给链接函数内部确定的函数。 <div my-method='theMethodToBeCalled'></div> 在链接函数中，我绑定到jQuery事件，该事件传递了我需要传递给函数的参数： app.directive("myMethod",function($parse) { restrict:'A', link:function(scope,element,attrs) { var expressionHandler = $parse(attrs.myMethod); $(element).on('theEvent',function( e, rowid ) { id = // some function called to determine id based on rowid scope.$apply(function() {expressionHandler(id);}); } } } app.controller("myController",function($scope) { $scope.theMethodToBeCalled = function(id) { alert(id); }; } 在不传递id的情况下，它可以正常工作，但是一旦尝试传递参数，就不再调用该函数
5
AngularJS：从模型数组中拼接模型元素时，不会更新ng-repeat列表
我有两个控制器，并使用app.factory函数在它们之间共享数据。 单击链接时，第一个控制器在模型数组（pluginsDisplayed）中添加一个小部件。将小部件推入数组，并将此更改反映到视图中（使用ng-repeat显示数组内容）： <div ng-repeat="pluginD in pluginsDisplayed"> <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div> </div> 该小部件基于三个指令k2plugin，remove和resize构建。remove指令将跨度添加到k2plugin指令的模板。单击该范围时，将使用删除共享数组中的右侧元素Array.splice()。共享阵列已正确更新，但更改未反映在视图中。但是，当添加另一个元素时，在删除之后，视图将正确刷新，并且不会显示先前删除的元素。 我怎么了？您能解释一下为什么这行不通吗？有没有更好的方法可以完成我想对AngularJS进行的操作？ 这是我的index.html： <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"> </script> <script src="main.js"></script> </head> <body> <div ng-app="livePlugins"> <div ng-controller="pluginlistctrl"> <span>Add one of {{pluginList.length}} plugins</span> <li ng-repeat="plugin in pluginList"> <span><a href="" ng-click="add()">{{plugin.name}}</a></span> </li> </div> <div ng-controller="k2ctrl"> <div ng-repeat="pluginD in pluginsDisplayed"> <div …
2
指令测试中的$ apply与$ digest
如果我有一个指令可以响应示波器上特定属性的状态，并且我想在测试中更改该属性并验证其是否正确响应，那是进行此更改的最佳方法？ 我已经看过这两种模式： scope.$apply(function() { scope.myAttribute = true; }); 和 scope.myAttribute = true; scope.$digest(); 它们之间有什么区别，哪个更好，为什么？
6
角度ng-bind-html和其中的指令
柱塞链接 我有一个我想将html绑定到它的元素。 <div ng-bind-html="details" upper></div> 这样可行。现在，连同它，我还有一个绑定到绑定的html的指令： $scope.details = 'Success! <a href="#/details/12" upper>details</a>' 但是upper带有div和anchor 的指令不求值。我该如何运作？
2
AngularJS中具有ng-repeat范围的指令隔离范围
我有一个带有隔离范围的指令（以便我可以在其他地方重用该指令），当我将此指令与一起使用时ng-repeat，它将无法正常工作。 我已经阅读了有关此主题的所有文档和Stack Overflow的答案，并了解了这些问题。我相信我避免了所有常见的陷阱。 因此，我知道我的代码由于ng-repeat指令创建的作用域而失败。我自己的指令创建了一个隔离范围，并与父作用域中的对象进行了双向数据绑定。我的指令将为该绑定变量分配一个新的对象值，并且在不使用我的指令的情况下ng-repeat（父变量已正确更新），这可以完美地工作。但是，使用时ng-repeat，赋值将在ng-repeat作用域中创建一个新变量，并且父变量看不到更改。所有这些都是根据我所读的内容预期的。 我还读到，当给定元素上有多个指令时，只会创建一个作用域。并且priority可以在每个指令中设置a，以定义指令的应用顺序；指令按优先级排序，然后调用其编译功能（在http://docs.angularjs.org/guide/directive中搜索优先级一词）。 因此，我希望可以使用优先级来确保我的指令先运行并最终创建一个隔离范围，并且在ng-repeat运行时，它会重新使用隔离范围，而不是创建一个原型上从父范围继承的范围。该ng-repeat文件指出，在优先级别的指令运行1000。不清楚1是较高优先级还是较低优先级。当我1在指令中使用优先级时，它没有什么不同，因此我尝试了2000。但这使情况变得更糟：我的双向绑定变为undefined，我的指令不显示任何内容。 我制造了一个小提琴来展示我的问题。我已经priority在指令中注释掉了设置。我有一个名称对象列表和一个名为的指令，该指令name-row显示名称对象中的名字和姓氏字段。单击显示的名称时，我希望它selected在主作用域中设置一个变量。名称数组，selected变量name-row使用双向数据绑定传递给指令。 我知道如何通过在主作用域中调用函数来使其工作。我也知道，如果selected在另一个对象内部，并且绑定到外部对象，则一切正常。但是我目前对这些解决方案不感兴趣。 相反，我的问题是： 如何防止ng-repeat创建从父作用域继承的原型作用域，而使用我的指令的isolate-scope？ 为什么2000我的指令中的优先级不起作用？ 使用Batarang，是否可以知道正在使用哪种类型的示波器？
4
从指令中调用控制器函数，而AngularJS中没有隔离范围
我似乎无法找到一种无需使用隔离范围就可以在指令中从父范围调用函数的方法。我知道，如果我使用隔离作用域，则可以在隔离作用域中使用“＆”来访问父作用域上的函数，但是在不必要时使用隔离作用域会产生后果。考虑以下HTML： <button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button> 在这个简单的示例中，我想显示一个JavaScript确认对话框，并且仅当他们在确认对话框中单击“确定”时才调用doIt（）。使用隔离范围很简单。该指令如下所示： .directive('confirm', function () { return { restrict: 'A', scope: { confirm: '@', confirmAction: '&' }, link: function (scope, element, attrs) { element.bind('click', function (e) { if (confirm(scope.confirm)) { scope.confirmAction(); } }); } }; }) 但是问题是，因为我使用的是隔离范围，所以上例中的ng-hide不再针对父范围执行，而是在隔离范围内执行（因为在任何指令上使用隔离范围都会导致该元素上的所有指令使用隔离范围）。这是上面示例的jsFiddle，其中ng-hide不起作用。（请注意，在此小提琴中，当您在输入框中键入“是”时，按钮应该隐藏。） 另一种选择是不使用隔离范围，这实际上是我在这里真正想要的，因为不需要将此指令的范围隔离。我唯一的问题是，如果不在隔离范围内传递方法，该如何在父范围内调用方法？ 这是一个我没有使用隔离范围的jsfiddle，而ng-hide可以正常工作，但是，当然，对confirmAction（）的调用不起作用，并且我不知道如何使它起作用。 请注意，我真正要寻找的答案是如何在不使用隔离范围的情况下在外部范围内调用函数。而且我对使该确认对话框以另一种方式工作不感兴趣，因为该问题的重点是弄清楚如何对外部作用域进行调用，并且仍然能够使其他指令在父作用域内起作用。 另外，如果其他指令仍然可以对父作用域起作用，那么我会很想听到使用隔离作用域的解决方案，但是我认为这是不可能的。
2
从AngularJS指令访问属性
我的AngularJS模板包含一些自定义HTML语法，例如： <su-label tooltip="{{field.su_documentation}}">{{field.su_name}}</su-label> 我创建了一个指令来处理它： .directive('suLabel', function() { return { restrict: 'E', replace: true, transclude: true, scope: { title: '@tooltip' }, template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>', link: function(scope, element, attrs) { if (attrs.tooltip) { element.addClass('tooltip-title'); } }, } }) 一切正常，但attrs.tooltip表达式始终返回undefined，即使tooltip在执行时从Google Chrome浏览器的JavaScript控制台可见该属性，该表达式始终返回console.log(attrs)。 有什么建议吗？ 更新：Artem提供了一种解决方案。它包括这样做： link: function(scope, element, attrs) { attrs.$observe('tooltip', …
1
AngularJS：ngInclude vs指令
我不太了解何时使用指令以及何时更适合使用nginclude。以以下示例为例：我有一个局部，password-and-confirm-input-fields.html即用于输入和确认密码的html。我在注册页面和更改密码页面下都使用了它。这两个页面各有一个控制器，部分html没有专用的控制器。 我应该使用指令还是ngInclude为此？
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.