Questions tagged «angularjs-directive»

我在视图中有一个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操作？

204 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当我们已经有了控制器时，该功能的意义是什么？

199 javascript  angularjs  angularjs-directive 

我正在尝试构建一个指令，该指令负责将更多指令添加到声明它的元素上。例如，我要建立一个指令，需要增加的照顾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元素，并且按预期方式，编译运行两次，这意味着预期options 的数量是原来的两倍。

197 javascript  angularjs  model-view-controller  mvvm  angularjs-directive 

我认为这是我对angularjs指令最难理解的概念之一。 来自http://docs.angularjs.org/guide/directive的文档说： transclude-编译元素的内容并将其提供给指令。通常与ngTransclude一起使用。包含的优点是链接功能接收一个预先绑定到正确作用域的包含功能。在典型的设置中，小部件创建隔离范围，但是包含不是子项，而是隔离范围的同级。这使得小部件可以具有私有状态，并且可以将包含项绑定到父（预隔离）范围。 true-包含指令的内容。 'element'-包括整个元素，包括以较低优先级定义的所有指令。 它说transclude通常与一起使用ngTransclude。但是ngTransclude文档中的示例根本不使用ngTransclude指令。 我想要一些很好的例子来帮助我理解这一点。我们为什么需要它？它能解决什么？如何使用它？

195 angularjs  angularjs-directive 

什么时候应该使用transclude: 'true'以及何时transclude: 'element'？我transclude: 'element'在Angular文档中找不到任何有关它们的信息，这非常令人困惑。 如果有人可以用简单的语言解释这一点，我将很高兴。每种选择的好处是什么？它们之间的真正区别是什么？ 这是我发现的： transclude: true 在编译函数中，您可以借助transclude链接函数来操作DOM，也可以使用任何HTML标记上的ngTransclude指令将已嵌入的DOM插入模板中。 和 transclude: ‘element’ 这会包含整个元素，并且在编译函数中会引入一个包含链接功能。您无法在此处访问范围，因为尚未创建范围。编译函数为该指令创建了一个链接函数，该链接函数可以访问范围，而transcludeFn可以让您触摸克隆的元素（已被嵌入）以进行DOM操作或使用绑定到其中范围的数据。供您参考，这在ng-repeat和ng-switch中使用。

176 angularjs  angularjs-directive  angularjs-ng-transclude 

我在routeProvider模板中有一个需要模板的自定义标签directive。该version属性将由范围填充，然后需要正确的模板。 <hymn ver="before-{{ week }}-{{ day }}"></hymn> 根据赞美诗的星期和日期，它有多种版本。我期望使用该指令来填充正确的.html部分。不会读取变量templateUrl。 emanuel.directive('hymn', function() { var contentUrl; return { restrict: 'E', link: function(scope, element, attrs) { // concatenating the directory to the ver attr to select the correct excerpt for the day contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html'; }, // passing in contentUrl …

169 angularjs  angularjs-directive 

我有一个使用callback带有隔离范围的指定属性的form指令： scope: { callback: '&' } 它位于内，ng-repeat因此我传递的表达式包括id对象的，作为回调函数的参数： <directive ng-repeat = "item in stuff" callback = "callback(item.id)"/> 当我完成指令后，它会$scope.callback()从其控制器函数中调用。在大多数情况下，这很好，这就是我想要做的，但是有时我想从directive自身内部添加另一个参数。 是否有一个允许这样的角度表达式：$scope.callback(arg2)，导致用callback调用arguments = [item.id, arg2]？ 如果没有，那么最干净的方法是什么？ 我发现这可行： <directive ng-repeat = "item in stuff" callback = "callback" callback-arg="item.id"/> 用 scope { callback: '=', callbackArg: '=' } 和指令调用 $scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) ); 但我认为这不是特别整洁，它涉及在隔离范围内放入其他内容。 有没有更好的办法？ 此处为Plunker游乐场（已打开控制台）。

160 javascript  angularjs  angularjs-directive  angularjs-scope 

我已经在AngularJS中的自定义指令的实现中阅读了很多有关这些符号的用法，但是这个概念对我来说仍然不清楚。我的意思是，如果我在custom指令中使用范围值之一，那意味着什么？ var mainApp = angular.module("mainApp", []); mainApp.directive('modalView',function(){ return{ restrict:'E', scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true } }); 运行代码段隐藏结果展开摘要 我们在这里对示波器做什么呢？ 我也不确定官方文档中是否存在“ scope：'>'”。它已在我的项目中使用。 编辑1 在我的项目中，使用“ scope：'>'”是一个问题，现已修复。

151 angularjs  angularjs-directive  angularjs-scope 

我已经开始学习AngularJS，并对ng-app和之间的区别感到困惑data-ng-app指令。

147 angularjs  angularjs-directive 

我只是从angularjs开始，并且正在努力将一些旧的JQuery插件转换为Angular指令。我想为我的（元素）指令定义一组默认选项，可以通过在属性中指定选项值来覆盖这些默认选项。 我一直在寻找其他人这样做的方式，并且在angular-ui库中ui.bootstrap.pagination似乎做了类似的事情。 首先，所有默认选项都在常量对象中定义： .constant('paginationConfig', { itemsPerPage: 10, boundaryLinks: false, ... }) 然后，将getAttributeValue实用程序功能附加到指令控制器： this.getAttributeValue = function(attribute, defaultValue, interpolate) { return (angular.isDefined(attribute) ? (interpolate ? $interpolate(attribute)($scope.$parent) : $scope.$parent.$eval(attribute)) : defaultValue); }; 最后，在链接函数中使用它来读入属性 .directive('pagination', ['$parse', 'paginationConfig', function($parse, config) { ... controller: 'PaginationController', link: function(scope, element, attrs, paginationCtrl) { var boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks, config.boundaryLinks); …

145 javascript  angularjs  angularjs-directive  options  default-value 

$watch在处理内部数据（例如，插入或删除数据）时如何在Angular指令中触发变量，但不给该变量分配新对象？ 我有一个当前从JSON文件加载的简单数据集。我的Angular控制器可以做到这一点，并定义一些功能： App.controller('AppCtrl', function AppCtrl($scope, JsonService) { // load the initial data model if (!$scope.data) { JsonService.getData(function(data) { $scope.data = data; $scope.records = data.children.length; }); } else { console.log("I have data already... " + $scope.data); } // adds a resource to the 'data' object $scope.add = function() { $scope.data.children.push({ "name": …

132 javascript  angularjs  angularjs-directive 

我正在构建的应用程序要求用户设置4条信息，然后才能加载该图像。该图像是应用程序的核心，因此断开的图像链接使整个外观看起来很闷。我想在404上放另一张图片。 有任何想法吗？我想避免为此编写自定义指令。 令我惊讶的是，我找不到类似的问题，尤其是当文档中的第一个问题相同时！ http://docs.angularjs.org/api/ng.directive:ngSrc

129 angularjs  angularjs-directive 

等号后的问号有特殊含义吗？即： scope: {foo: '=?'} 上面的意思是“无法解决'foo'时不会引发错误？”

127 angularjs  angularjs-directive 

我正在使用angularjs编写示例应用程序。我在chrome浏览器上遇到以下错误。 错误是 错误：[ng：areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined 呈现为 参数“ ContactController”不是函数，未定义 码 <!DOCTYPE html> <html ng-app> <head> <script src="../angular.min.js"></script> <script type="text/javascript"> function ContactController($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; } </script> </head> <body> <h1> modules sample </h1> <div ng-controller="ContactController"> Email:<input type="text" ng-model="newcontact"> <button ng-click="add()">Add</button> <h2> Contacts …

123 javascript  angularjs  angularjs-directive  angularjs-scope 

我有一个已templateUrl定义的AngularJS指令。我正在尝试与Jasmine进行单元测试。 根据此建议，我的Jasmine JavaScript如下所示： describe('module: my.module', function () { beforeEach(module('my.module')); describe('my-directive directive', function () { var scope, $compile; beforeEach(inject(function (_$rootScope_, _$compile_, $injector) { scope = _$rootScope_; $compile = _$compile_; $httpBackend = $injector.get('$httpBackend'); $httpBackend.whenGET('path/to/template.html').passThrough(); })); describe('test', function () { var element; beforeEach(function () { element = $compile( '<my-directive></my-directive>')(scope); angular.element(document.body).append(element); }); afterEach(function () …

122 angularjs  angularjs-directive  jasmine