我想将w filter作为param传递给我的app中的自定义指令.我想做的事情如下:
申请中的用法:
<my-directive data='dataVariable' dataFilter='numericFilter: 123'/>
指令模板:
<span> {{ data | dataFilter }} </span>
指示:
...
scope: {
data: '=',
dataFilter: '@'
}
...
当我做上面的shwon时,我得到与语法有关的错误(:无法识别),依赖注入(找不到过滤器)或过滤器什么都不做.
嗨,我正在努力使用这段代码.我很确定一切都好,但显然不是.这只是一些简单的表单验证,这是一个示例输入字段:
<form name="form" novalidate ng-controller="signupFormCtrl">
<!-- USERNAME -->
<!-- USERNAME FIELD -->
<input type="text"
ng-model="user.name"
name="username"
placeholder="Nome"
ng-model-options="{ debounce: 1000 }"
required />
<!-- USERNAME ERROR -->
<span class="error-message"
ng-show="form.username.$dirty && form.username.$error.required">Ci serve il tuo nome</span>
</form>
每个字段都有一个或多个包含在跨度中的错误消息,当正确的ng-show检查评估为true时会显示这些消息.这工作正常,但我希望错误显示"模糊"或稍有延迟.ng-model-options我试过:
{ updateOn : 'blur' },
{ debounce : '1000' },
{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0}}
这些选项都不起作用,错误显示但没有任何延迟并忽略'blur'选项.
这也是我正在使用的(非常简单的)控制器,它可能是那里的东西吗？据我所知,没有.
app.controller('signupFormCtrl', ['$scope', function ($scope){
$scope.user = {};
$scope.sendInfo = function (user) {
var userData = 'user=' + user.name + '&mail=' + …我正在寻找一个新的angular指令,用于将输入的ngmodel值与其他值进行比较,并检查它们是否相等.
如果它们相等,我希望此输入有效.否则,无效.
<div ng-repeat="one in many">
<ng-form name="somethingToValidate">
<input type="text" ng-model="one.userTypedText"
required mustbeequalto="one.someOtherValue" />
</ng-form>
</div>
这是完成后使用的"mustbeequalto"指令的一个例子.
1)请注意{{one.someOtherValue}}可以随时更改,因此该指令必须了解此值的双向绑定特性.
2)我将在ng-repeat中使用它,因此它应该足够聪明,只能在包含它的特定ng-form的范围内工作.
我想我需要一个验证指令,但如果您认为有更好/更优雅的方式,请告知.我已经尝试创建这个指令并且失败了.
我正在创建一个navBar指令,我想使用$ routeParams来确定要设置为活动的链接.我可以在控制器中访问$ routeParams而没有问题:
app.controller('MovieDetailsController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
$scope.movie = {};
console.log($routeParams);
}]);
但是,我无法从我的指令中的$ routeParams获取任何数据:
app.directive('navBar', ['$routeParams', function ($routeParams) {
console.log($routeParams);
}]);
我究竟做错了什么？
我需要以某种方式从页面的一部分(滚动,单击)发出事件,该事件由一个指令提供给页面的其他部分,由其他控制器提供,以便可以相应地更新.用例 - 例如带有注释的Word文档,该注释与视口中的页面一起移动.因此,在我的设计中,我有指示链接方法,我需要将其中的事件广播到我的应用程序中的其他控制器.我的链接功能里面有什么:
element.bind('click', function (e) {
var eventObj = element.scrollTop();
scope.$broadcast('app.scrollOnDocument', eventObj);
});
这个事件我不能直接在其他控制器中看到 - 所以在其他控制器中这样的代码不起作用:
$scope.$on('app.scrollOnDocument', function (e, params) {
console.log(e, params);
});
所以我要做的是拦截同一指令控制器中的那些事件,并将它们广播到更高的范围,如:
$scope.$on('app.scrollOnDocument', function(event, params){
//go further only if some_condition
if( some_condition ){
$rootScope.$broadcast('app.scrollOnDocumentOuter', params);
}
});
我不确定这是否正确.也许我错过了一些指令属性或设置使其成为可能？
我有一个类似http://example.com/test/sample&fname=hello&lname=world的URL ，它将显示一个名为“ Home.html ” 的页面
我需要从URL 获取这些值hello和world，并在与我相同的“ Home.html ” 中的ng-init指令中使用它。
<div ng-init="init('val1','val2')"></div>
当VAL1应该包含问候和VAL2应该包含世界？
是否可以在AngularJS中做到这一点，并且是正确的解决方法？请帮帮我！
angularjs angularjs-directive angularjs-scope angular-ui-router
我正在构建angularJs指令,我需要在用模板替换之前获取元素html.例如:
<edit>Default title</edit>
我的指令如下:
.directive('edit', function() {
return {
restrict: "EA",
scope: {},
template: '<h1 ng-show="!edit_mode">{{variable.value}}</h1><input ng-show="edit_mode" ng-model="variable.value" />',
link: function( scope, element ) {
scope.edit_mode = false;
scope.variable = {
value: element.html()
}
console.log( scope.variable );
}
}
});
但在控制台中我看到(当然在网页中相同)
Object {value: "<h1 ng-show="!edit_mode" class="ng-binding">{{variable.value}}</h1><input ng-show="edit_mode" ng-model="variable.value" class="ng-pristine ng-valid">"}
我正在尝试在按钮组的每个按钮中添加angular-bootstrap工具提示.当我这样做时,悬停右键会破坏所有按钮样式.
HTML:
<div class="btn-group" style="margin-top:100px;">
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
JS:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope) {
$scope.dynamicTooltip = 'Hello, World!';
});
这是我的傻瓜:http://plnkr.co/edit/NFjJJXEKyJHDgddcPdNa?p=preview
我在这里遇到了一个非常奇怪的情况.
起初,我写了一个简单的指令.
mublABase.directive('parentSize', function() {
return {
link : function(scope, elem, attrs) {
scope.parentSize = {
width : elem.parent().width(),
height : elem.parent().height()
}
}
}
});
这是我简化的HTML代码
<input type="text" ng-model="parentSize.width"> //for test No.1
<div parent-size class="no-border">
{{parentSize.width}} //for test No.2
<span class="glyphicon glyphicon-leaf" ng-style="{'font-size':'{{parentSize.width}}px'}"></span> //this is the problem No.3
</div>
结果被打破了.No.1输入和No.2文本表示宽度为285.但是在No.3,叶子图标的大小只是默认大小.
(抱歉没有发布结果图片.我在这里非常诺布,我没有任何声誉)
怎么会发生？更重要的是,我该如何解决？
我尝试使用过滤器| filter: {pro: value},但我有一个非常奇怪的错误:错误:[$ rootScope:infdig] 10 $ digest()迭代达成.中止!...
在我的控制器中,我只是$scope.slots = […].
我的观点非常简单:<div time-slots="slots | filter: {day:1}"></div>.
我的指示是公正的 templateUrl: 'time-slot.html', restrict: 'A', scope: { timeSlots: '=' }.
我完全迷失了这个错误...我不明白我的代码有什么问题.这里有一个掠夺者
我做错什么了吗 ？