我正在研究指令的模板.如果作用域中的属性设置为true,data-toggle="dropdown"则应将该属性附加到该元素.如果变量为false,则此数据属性不应呈现为元素的属性.
例如,如果scope变量为true,则模板应呈现:
<span data-toggle="dropdown"></span>
如果为false,则模板应呈现:
<span></span>
模板看起来会是什么样的？
例如,我知道我可以ng-class有条件地使用一个类.如果我想要模板渲染:
<span class="dropdown"></span>
然后我的模板看起来像这样:
"<span ng-class="{ 'dropdown': isDropDown }"></span>
如果范围变量isDropDown是false,则模板将简单地呈现:
<span></span>
所以在模板中有一种方法可以有条件地添加一个class="dropdown".模板的语法是否允许我有条件地添加data-toggle="dropdown"？
我为模板尝试过的一件事是:
"<span data-toggle="{ 'dropdown': isDropDown }"></span>
我对上述模板的思考是,如果范围变量isDropDown为true,则值data-toggle将设置为"dropdown".如果isDropDown为false,那么value data-toggle将只是一个空字符串"".但这似乎不起作用.
如果不存在单独服务器上的图像,我想显示默认图像.是否有角度指令来实现这一目标？
该指令试图创建一个名为进度条的HTML元素,用于在页面移动到页面时跟踪进度.我正在尝试将其开发用作:
<progress-bar progress='1' max='6' error="true"></progress-bar>
我只是试图将html中的^^元素中的信息传递给我的指令并处理信息以适当地更改进度条.
这适用于"progress"和"max",它取整数值,但由于某种原因,注释掉的代码会处理"错误"(这是一个字符串)会导致问题.我是angularJS的新手,所以如果这些听起来令人困惑或不清楚,我很抱歉......请问我是否需要详细说明/澄清.提前致谢!
app.directive('progressBar', function(){
var compileProgressBar = function(scope, elem, attrs) {
var append = '<nav class="navbar navbar-fixed-bottom navbar-footer" role="navigation">\
<div class="container">\
<div class="row">';
var i = 1;
while (i <= parseInt(scope.max)) {
if (i <= parseInt(scope.progress)) {
//if (scope.error == "true"){
//...
//}
//else {
append += '<div class="col-xs-1"><div class="circle-filled"><center>'+i+'</center></div></div>'
//}
} else {
append += '<div class="col-xs-1"><div class="circle-hallow"><center>'+i+'</center></div></div>'
}
i++;
}
append += '</div></div></nav>'
elem.append(append);
elem.bind('click', function(){
if (scope.progress > 1) {
history.back();
scope.$apply(); …javascript string parameter-passing angularjs angularjs-directive
在Angular2中,如何屏蔽输入字段(文本框),使其仅接受数字而不接受字母？
我有以下HTML输入:
<input
type="text"
*ngSwitchDefault
class="form-control"
(change)="onInputChange()"
[(ngModel)]="config.Value"
(focus)="handleFocus($event)"
(blur)="handleBlur($event)"
/>
上面的输入是通用文本输入,可以用作简单文本字段或数字字段(例如显示年份).
使用angular2,我如何使用相同的输入控件并在此字段上应用某种过滤器/蒙版,这样它只接受数字？我可以通过哪些不同方式实现这一目标？
注意:我需要仅使用文本框而不使用输入数字类型来实现此目的.
我们遇到的问题是在我们的指令的link函数中使用&符号'&'调用传递给指令的函数.
似乎在控制器上调用了该函数,但在调用中没有传递参数.我们看到的所有示例都涉及通过在模板中创建调用来进行传递.有没有办法从它的模板调用你的指令函数,然后在调用传递给它的控制器函数的指令中做一些事情？
当用户将浏览器窗口滚动到某个点以下时,我正在切换#page div的类.
到目前为止我所做的工作正常:
<div ng-app="myApp" scroll id="page">
<header></header>
<section></section>
</div>
app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= 100) {
element.addClass('min');
console.log('Scrolled below header.');
} else {
element.removeClass('min');
console.log('Header is in view.');
}
});
};
});
(当他们在标题下方滚动窗口时,100px,该类被切换)
虽然,如果我错了,请纠正我,我觉得这不是用Angular做这件事的正确方法.
相反,我认为执行此操作的最佳方法是使用ng-class并在范围中存储布尔值.像这样的东西:
<div ng-app="myApp" scroll id="page" ng-class="{min: boolChangeClass}">
<header></header>
<section></section>
</div>
app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= 100) …如果您希望在工作代码中看到问题,请从这里开始:http://jsbin.com/ayigub/2/edit
考虑这几乎相同的方式来编写一个简单的方法:
app.directive("drinkShortcut", function() {
return {
scope: { flavor: '@'},
template: '<div>{{flavor}}</div>'
};
});
app.directive("drinkLonghand", function() {
return {
scope: {},
template: '<div>{{flavor}}</div>',
link: function(scope, element, attrs) {
scope.flavor = attrs.flavor;
}
};
});
当它们自己使用时,这两个指令的工作和行为相同:
<!-- This works -->
<div drink-shortcut flavor="blueberry"></div>
<hr/>
<!-- This works -->
<div drink-longhand flavor="strawberry"></div>
<hr/>
但是,在ng-repeat中使用时,只有快捷方式版本有效:
<!-- Using the shortcut inside a repeat also works -->
<div ng-repeat="flav in ['cherry', 'grape']">
<div drink-shortcut flavor="{{flav}}"></div>
</div>
<hr/>
<!-- HOWEVER: using the …我从数据库中获取数据并显示它:
<ul>
<li ng-repeat="item in items>
<mydate>{{item.date}}</mydate>
</li>
</ul>
{{item.date}}Unix日期在哪里,如1374843600.如何使用AngularJS指令设置日期格式？可能吗？
当我尝试这样做时,我得到了标签mydate的值 - {{item.date}}
我已经阅读了几篇与AngularJs焦点设置相关的文章和StackOverflow问题.
不幸的是,我读过的所有例子都假设我可以添加一些属性来获得焦点,例如一个focusMe指令.
但是,如果我事先不知道将焦点设置为哪个输入呢？特别是如何将焦点设置为具有$ invalid set的表单中的第一个输入元素 - 即一个未通过验证的元素.可能有几个输入未通过验证,因此我无法使用仅基于此尝试调用.focus()的指令.(我这样做是出于辅助功能/ WCAG的原因,这样做的好方法就是单击提交时最小化按键以找到验证失败的第一个字段).
$ error对象将为所有未通过验证的控件提供帮助,但它们按照表单上任何外观顺序的失败类型进行分组.
我相信我能想出一些这样做的方法.表单上的指令,当需要设置焦点时接收一些广播 - 该指令然后可以搜索第一个$ invalid元素.然而,这似乎非常复杂,我想知道这些是否是更好的"角度"方式.
我在一个指令中工作,我在使用参数element按类名查找其子节点时遇到问题.
.directive("ngScrollList", function(){
return {
restrict: 'AE',
link: function($scope, element, attrs, controller) {
var scrollable = element.find('div.list-scrollable');
...
}
};
})
我可以通过标签名称找到它,但它无法通过类名找到它,我在控制台中可以看到:
element.find('div')
[<div class=?"list-viewport">?…?</div>?,<div class=?"list-scrollable">?…?</div>?]
element.find('div.list-scrollable')
[]
这样做的正确方法是什么？我知道我可以添加jQuery,但我想知道这是不是一个矫枉过正....