程序设计 angularjs-directive

3

我的代码： app.directive('abcabc', function (){ alert('directive');}); // working 但 app.directive('abcAbc', function (){ alert('directive');}); // not working ! app.directive('abc-abc', function (){ alert('directive');}); // not working ! 我做错了吗？还是Angular指令有特殊的命名规则？

76 angularjs angularjs-directive

5

将表格传递给指令

我想将表单字段封装在指令中，所以我可以简单地做到这一点： <div ng-form='myForm'> <my-input name='Email' type='email' label='Email Address' placeholder="Enter email" ng-model='model.email' required='false'></my-input> </div> 我如何myForm在指令中访问，以便进行验证检查，例如myForm.Email.$valid？

75 angularjs angularjs-directive

5

参数更改时刷新角度指令

我有一个初始化的角度指令，如下所示： <conversation style="height:300px" type="convo" type-id="{{some_prop}}"></conversation> 我希望它足够聪明，可以在$scope.some_prop更改时刷新指令，因为这意味着它应该显示完全不同的内容。我已经对其进行了测试，但没有任何反应，$scope.some_prop更改时甚至没有调用链接函数。有没有办法做到这一点？

75 javascript angularjs angularjs-directive angularjs-scope

6

在输入元素中使用angularjs过滤器

我希望我不会错过doco中任何明显的内容，如果可以的话，我相信有人会帮助您。我正在使用asp.net webapi返回带有日期字段的DTO。这些使用JSON.Net（格式为'2013-03-11T12：37：38.693'）进行序列化。我想使用过滤器，但是在INPUT元素中，这是否可行？或者我应该创建一个新的过滤器或指令来实现此目的？ // this just displays the text value <input ui-datetime type="text" data-ng-model="entity.date" /> // this doesn't work at all <input ui-datetime type="text" data-ng-model="{{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}}" /> // this works fine {{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}} 我缺少任何捷径吗？

74 angularjs asp.net-web-api angularjs-directive

2

AngularJS指令绑定具有多个参数的函数

我在将控制器中定义的函数与指令中的回调函数绑定时遇到一些麻烦。我的代码如下所示：在我的控制器中： $scope.handleDrop = function ( elementId, file ) { console.log( 'handleDrop called' ); } 然后我的指令： .directive( 'myDirective', function () { return { scope: { onDrop: '&' }, link: function(scope, elem, attrs) { var myFile, elemId = [...] scope.onDrop(elemId, myFile); } } ); 在我的html页面中： <my-directive on-drop="handleDrop"></my-directive> 上面的代码没有运气。根据我在各种教程中所读的内容，我知道我应该在HTML页面中指定参数？

72 angularjs angularjs-directive

8

Jasmine使用templateUrl测试AngularJS指令

我正在使用Jasmine编写AngularJS的指令测试，并与它们一起使用templateUrl：https : //gist.github.com/tanepiper/62bd10125e8408def5cc 但是，当我运行测试时，我得到了要点中包含的错误： Error: Unexpected request: GET views/currency-select.html 从我在文档中阅读的内容来看，我认为自己做得正确，但是事实并非如此-我在这里想念的是什么？谢谢

70 unit-testing angularjs jasmine angularjs-directive

4

AngularJS中元素的指令模板唯一ID

我有一个指令，可以在一个页面上多次使用。在此指令的模板中，我需要对输入元素使用ID，以便可以将Label“绑定”到它，如下所示： <input type="checkbox" id="item1" /><label for="item1">open</label> 现在的问题是，一旦多次包含我的指令，ID“ item1”就不再是唯一的，并且标签将无法正常工作（单击时应选中/取消选中该复选框）。该问题如何解决？有没有一种方法可以为模板分配“名称空间”或“前缀”（例如asp.net使用ctl00 ...- Prefix）？还是我必须在每个id属性中包括一个angular-Expression，它由作用域中的指令ID +一个静态ID组成。就像是： <input type="checkbox" id="{{directiveID}} + 'item1'" /><label for="{{directiveID}} + 'item1'">open</label> 编辑：我的指令 module.directive('myDirective', function () { return { restrict: 'E', scope: true, templateUrl: 'partials/_myDirective.html', controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) { ... } //controller }; }]); 我的HTML …

70 angularjs templates angularjs-directive uniqueidentifier

2

将变量从服务/工厂绑定到控制器

我有一个变量，将由一个或多个控制器使用，由服务更改。在那种情况下，我建立了一个服务来将该变量保存在内存中，并在控制器之间共享。问题是：每次变量更改时，控制器中的变量都不会实时更新。我创建这个小提琴来提供帮助。http://jsfiddle.net/ncyVK/ ---请注意，当我增加count的值时，{{countService}}或{{countFactory}}永远不会更新。如何将Service / Factory变量绑定到Controller中的$ scope.variable？我做错了什么？

69 angularjs angularjs-directive

4

从AngularJS中的指令调用父控制器的方法

在上一个问题之后，我现在尝试从指令中调用父控制器上的方法。我得到一个未定义的参数。这是我的工作： <body ng-app="myApp" ng-controller="MainCtrl"> <span>{{mandat.rum}}</span> <span>{{mandat.surname}}</span> <input type="text" ng-model="mandat.person.firstname" /> <my-directive mandate-person="mandat.person" updateparent="updatePerson()" > </my-directive> </body> 和脚本： var app = angular.module('myApp', []); app.controller('MainCtrl', function ($scope) { $scope.mandat = { name: "John", surname: "Doe", person: { id: 1408, firstname: "sam" } }; $scope.updatePerson = function(person) { alert(person.firstname); $scope.mandat.person = person; } …

69 angularjs angularjs-directive

4

用ng-click自动传递$ event？

我知道，ng-click如果$event像这样传递对象，就可以访问click事件： <button ng-click="myFunction($event)">Give me the $event</button> <script> function myFunction (event) { typeof event !== "undefined" // true } </script> $event每次必须显式地通过都会有点烦人。是否可以设置ng-click为默认将其传递给函数？

69 javascript angularjs angularjs-directive dom-events angularjs-ng-click

9

AngularJS指令不会在范围变量更改时更新

我尝试编写一个小指令，以将其内容包装在另一个模板文件中。这段代码： <layout name="Default">My cool content</layout> 应该具有以下输出： <div class="layoutDefault">My cool content</div> 因为布局“默认”具有以下代码： <div class="layoutDefault">{{content}}</div> 指令的代码如下： app.directive('layout', function($http, $compile){ return { restrict: 'E', link: function(scope, element, attributes) { var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default'; $http.get(scope.constants.pathLayouts + layoutName + '.html') .success(function(layout){ var regexp = /^([\s\S]*?){{content}}([\s\S]*)$/g; var result = regexp.exec(layout); var …

68 javascript angularjs angularjs-directive angularjs-scope

6

在Angular Directive的链接函数中使用ng-click vs bind

在链接函数中，是否存在将函数绑定到click事件的更多“角度”方式？现在，我在做... myApp.directive('clickme', function() { return function(scope, element, attrs) { scope.clickingCallback = function() {alert('clicked!')}; element.bind('click', scope.clickingCallback); } }); 这是Angular的方式还是丑陋的破解？也许我不应该这么担心，但是我是这个框架的新手，并且想知道“正确”的做事方式，尤其是随着框架的发展。

67 angularjs angularjs-directive

Questions tagged «angularjs-directive»