此自定义验证指令是官方角度站点上提供的示例. http://docs.angularjs.org/guide/forms 它检查文本输入是否为数字格式.
var INTEGER_REGEXP = /^\-?\d*$/;
app.directive('integer', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (INTEGER_REGEXP.test(viewValue)) {
// it is valid
ctrl.$setValidity('integer', true);
return viewValue;
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('integer', false);
return undefined;
}
});
}
};
});
为了对这段代码进行单元测试,我写道:
describe('directives', function() {
beforeEach(module('exampleDirective'));
describe('integer', function() {
it('should validate an integer', function() {
inject(function($compile, $rootScope) {
var element = angular.element(
'<form name="form">' +
'<input ng-model="someNum" …我的代码:
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指令有特殊的命名规则？
我想将我的表单字段封装在一个指令中,所以我可以简单地这样做:
<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？
我希望我没有错过任何明显的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'}}
我有什么捷径可走吗？
我有一个角度指令,初始化如下:
<conversation style="height:300px" type="convo" type-id="{{some_prop}}"></conversation>
我希望它足够聪明,可以在$scope.some_prop更改时刷新指令,因为这意味着它应该显示完全不同的内容.
我已经测试了它,没有任何反应,连接函数甚至在$scope.some_prop更改时都没有被调用.有没有办法让这种情况发生？
我正在使用Jasmine为AngularJS编写指令测试,并使用templateUrl:https://gist.github.com/tanepiper/62bd10125e8408def5cc
但是,当我运行测试时,我得到了gist中包含的错误:
Error: Unexpected request: GET views/currency-select.html
从我在文档中看到的,我认为我正确地做了这个,但它似乎不是这样 - 我在这里错过了什么？
谢谢
按照我之前的问题,我现在尝试从我的指令调用父控制器上的方法.我得到一个未定义的参数.这是我做的:
<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;
}
});
app.directive('myDirective', function () {
return {
restrict: 'E',
template: "<div><span>{{mandatePerson.id}}<span><input type='text' ng-model='mandatePerson.firstname' /><button ng-click='updateparent({person: mandatePerson})'>click</button></div>",
replace: true,
scope: { mandatePerson: '=', updateparent: '&' }
}
}
) …我有一个将由一个或多个控制器使用的变量,由服务更改.在这种情况下,我构建了一个服务,将此变量保存在内存中,并在控制器之间共享.
问题是:每次变量发生变化时,控制器中的变量都不会实时更新.
我创建这个小提琴帮助.http://jsfiddle.net/ncyVK/
---注意当我递增count的值时,{{countService}}或者{{countFactory}}永远不会更新.
如何将Service/Factory变量绑定到Controller中的$ scope.variable？我做错了什么？
我有一个可以在页面上多次使用的指令.在这个指令的模板中,我需要为input-Element使用ID,所以我可以像这样"绑定"一个Label:
<input type="checkbox" id="item1" /><label for="item1">open</label>
现在问题是,只要多次包含我的指令,ID"item1"就不再是唯一的,并且标签不能正常工作(点击时应选中/取消选中复选框).
这个问题是如何解决的？有没有办法为模板分配"命名空间"或"前缀"(就像asp.net与ctl00 ...-前缀一样)？或者我必须在每个id-Attribute中包含一个angular-Expression,它包含Scope中的指令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
<div class="myDirective">
<input type="checkbox" id="item1" /><label for="item1">open</label>
</div>
我在控制器中定义的函数与指令中的回调函数绑定时遇到了一些麻烦.我的代码如下所示:
在我的控制器中:
$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页面中指定参数？