我正在尝试使用此AngularJS infinite-scroll指令.这是来源:
angular.module('infiniteScroll', [])
.directive('infiniteScroll', [ "$window", function ($window) {
return {
link:function (scope, element, attrs) {
var offset = parseInt(attrs.threshold) || 0;
var e = element[0];
element.bind('scroll', function () {
if (scope.$eval(attrs.canLoad) && e.scrollTop + e.offsetHeight >= e.scrollHeight - offset) {
scope.$apply(attrs.infiniteScroll);
}
});
}
};
}]);
这似乎仅适用于滚动框中包含的元素.这是一个演示这个的Plunker.
但是,我希望能够将这个简单的指令应用于静态的DOM元素,scope.$apply(attrs.infiniteScroll)当元素接近窗口滚动的底部时调用.
关于如何修改指令以允许这个的任何想法？我试图改变e.scrollTop到window.scrollTop,但无济于事,这有点超出了我目前的技术水平很遗憾.
html javascript infinite-scroll angularjs angularjs-directive
我正在将一个jQuery webapp移植到AngularJS(< - beginner!).
为了整合bxSlider和一些模板化的东西,我写了以下指令:
[编辑]最好看看jsFiddle jsfiddle.net/Q5AcH/2/ [/ Edit].
angular.module('myApp')
.directive('docListWrapper', ['$timeout', function ($timeout) {
return {
restrict: 'C',
templateUrl: 'partials/doc-list-wrapper.html',
scope: { docs: '=docs'},
link: function (scope, element, attrs) {
$timeout(function () {
element
.children('.doc-list')
.not('.ng-hide')
.bxSlider(); // <-- jQuery plugin doing heavy DOM manipulation
}, 100); // <-------------- timeout in millis
}
};
}]);
没有$timeout问题,bxSlider无法计算新创建的元素的大小或根本找不到它们.
我有点担心使用长超时值可能会导致闪烁而使用短值可能会导致慢速机器出现问题.
在我的实际应用程序中(当然有更多数据和更多部分而不是jsFiddle)我发现了一些奇怪的东西:
当我使用超时值时,使用10或更多毫秒就足够了,所以jQuery插件bxSlider找到一个完整的DOM.等待时间较少(9毫秒或更少),插件无法正常包装<ul>.
但是仍然存在非常讨厌的闪烁问题.
在小提琴中,可能是由于DOM较小,Chrome + Firefox中只有Internet Explorer 10才会出现闪烁现象.
我不想依赖于经验值,因为$timeout它可能高度依赖于机器,操作系统,渲染引擎,角度版本,血液预测......
有一个强大的解决方法吗？
我已经找到了一些带有事件监听器($on, …
我正在使用AngularJS,我想添加一个用于显示图像的灯箱.我的灯箱代码就像这样(我使用的是shadowbox):
<a href="myimage.jpg" rel="shadowbox">image name</a>
但是当我想像AngularJS一样使用shadowbox时:
<a ng-repeat="pic in pics" href="{{pic}}" rel="shadowbox">image name</a>
阴影框将被忽略,它的工作方式类似于普通链接.使这项工作的最佳方法是什么？
我可能要写一个指令,但我不熟悉它...
我正在创建一个angularjs组件,它将(将)提供一个带有过滤,排序,切换选项,滚动等的复选框列表指令......一旦完成.它应该可以帮助人们处理长复选框列表.
我正在尝试按标签或ID功能测试订单,但即使在$ digest或$ apply调用之后,模板也不会反映模型更改.我试图解决但没办法.
这是指令定义:
angular.module('angularjsSmartcheckboxApp')
.directive('smartCheckbox', [function () {
return {
templateUrl: 'views/smartcheckbox.html',
restrict: 'E',
replace: true,
scope: {model: '='},
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
// TODO
}]
};
}]);
用法:
<smart-checkbox model="smartList" />
其中smartList是:
$scope.smartList = [
{id: '001', label: 'First item'},
{id: '002', label: 'Second item'},
{id: 'Z01', label: 'Another item'}
];
这是模板:
...
<div class="input-group ordercontrols">
Order options:
<label class="radio-inline">
<input type="radio" value="label" ng-model="orderby"> Label
</label>
<label class="radio-inline">
<input type="radio" value="id" ng-model="orderby"> …我是angularjs的新手,很难理解自定义指令示例和相关的博客.
为什么我们使用它以及自定义指令的用法.(使用内置指令很容易理解和使用)
可以根据我们的需求编写自己的自定义指令吗？
角度js中自定义指令的需求是什么？
angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
我想在自定义angularjs指令中包含一些ui-view元素
<wrapper>
<ul>
<li><a ui-sref="route1">Route 1</a></li>
<li><a ui-sref="route2">Route 2</a></li>
</ul>
<div class="well" ui-view="viewA"></div>
<div class="well" ui-view="viewB"></div>
</wrapper>
自定义指令除了转换内容外什么都不做:
myapp.directive('wrapper', function($compile){
return {
restrict: 'E',
replace: true,
transclude:true,
template: '<div class="godWrapper" ng-transclude></div>'
};
});
请参阅 Plunker中的演示
似乎ui-view不喜欢被包装,因为当我删除包装元素时,演示工作没有问题.这是ui-router中的错误还是我做错了什么？
更新:
为什么在创建指令时,它仅限于默认属性.为了创建由元素或类名触发的指令,我们需要使用restrict选项吗？
restrict选项通常设置为:
可以根据需要组合这些限制:
angularjs中只有这些限制吗？或者,是否有其他限制？
我正在编写一些非常复杂的DOM操作,这肯定会测试我编写非常复杂的指令的能力.我没有遇到过任何能够展示我想做的事情的例子(我认为无论如何).
假设我有一个小部件列表,可以是不同类型的小部件.这些小部件需要在<ul>元素中显示.但是每种类型的小部件都可以是不同的,因此内部每个小部件的实际标记<li>将大不相同.
如果我需要的只是标准标记,我认为实现它并不困难,但是这些小部件中的每一个都必须创建我希望Angular处理的html片段.它们可能是想要使用的简单东西ng-click,但也许更复杂,比如想要使用我自己的自定义指令.
理想情况下,我想分别为每个小部件创建指令,只是为了区分问题,因为我认为大多数小部件的代码本身都很复杂.然后,我可能想要另一个指令检查窗口小部件的类型并创建一个使用各个窗口小部件指令的html片段.那有意义吗？如果没有,那么我可能想以类似的方式区分问题.
有没有办法做到这一点？
我有一种情况,我必须创建一个带有一些花里胡哨的容器指令..然后我有一个可以包装到该容器指令中的指令列表.
像这样的东西:
<the-container foo="bell" bar="whistle">
<some-directive></some-directive>
</the-container>
<the-container foo="potato" bar="tomato">
<some-other-directive></some-other-directive>
</the-container>
有没有什么办法中,我可以<some-directive>和<some-other-directive>认识的foo和/或bar属性,它们在transcluded指令的价值观？
基本的theContainer指令
.directive("theContainer", function() {
return {
restrict: "E",
replace: true,
transclude: true,
scope: true,
templateUrl: "theContainer.html",
compile: function(element, attrs) {
return function(scope, element, attrs) {
scope.containerAttrs = {
foo: attrs.foo,
bar: attrs.bar
};
};
}
}
});
让我们假设这两个指令一起具有不同且无关的功能
someDirective
.directive("someDirective", function() {
return {
restrict: "E",
scope: true,
templateUrl: "someDirective.html",
controller: function($scope, $element, $attrs) {},
compile: function(element, attrs) { …所以,我需要一个验证器来检查以确保我的password_confirmation字段与我的password字段匹配.我最终得到了以下指令:
指示
@app.directive 'matches', ->
require: 'ngModel', #Needed for validation bits
scope: { matched_value: '=matches' } #Looks up the value of the scope element we're matching against and keeps it bound
link: (scope, elem, attrs, ctrl) ->
ctrl.$parsers.unshift (view_value) -> #Add a new parser that updates the validity
ctrl.$setValidity(elem.attr('name'), view_value == scope.matched_value)
形成
<form name="form">
<input ng-model="new_user.password" name="password">
<input ng-model="password_confirmation" name="password_confirmation" matches="new_user.password">
</form>
当用户从上到下使用表单时,这很好用.然而,如果他们继续改变password之后他们已经填补了password_confirmation它,那么它就不会像它应该的那样变得无效.
我的第一个stab看起来添加了一个$watcher指令,但我似乎无法获得新password_confirmation输入的正确值.
带观察者的指令(CoffeeScript)
@app.directive 'matches', …