angularjs-directive | 易学教程

AngularJS 'scrollTop' equivalent?

阅读更多关于 AngularJS 'scrollTop' equivalent?

问题 I'm looking to implement something similar to this in an AngularJS directive: https://github.com/geniuscarrier/scrollToTop/blob/master/jquery.scrollToTop.js It's fairly straightforward, when you are not at the top of the page it will fade in a button to scroll to the top: $(window).scroll(function() { if ($(this).scrollTop() > 100) { $this.fadeIn(); } else { $this.fadeOut(); } }); However I'm having a hard time finding how to get the current scroll location in Angular. I'd rather not have to

Create a container directive in angularjs

阅读更多关于 Create a container directive in angularjs

So I'm trying to create a directive that will layout a collection of items in columns. In the plunker I have a extremely simplified version which only uses a single ul, but that is not important. I want the directive to be called like . <my-column-layout collection="names"> <tab name="{{ item }}"></tab> </my-column-layout> I want to use the inner html (the tab here) as a template for each item in the collection. I tried to just have a ng-repeat in the my-column-layout template like template : '<ul><li ng-repeat="item in collection" ng-transclude></li></ul> which worked but it didnt have access

AngularJs - Calling controller function from directive

阅读更多关于 AngularJs - Calling controller function from directive

In an angularjs project I am using a directive to upload files by drag/dropping them in a dropzone. In the directive I need to call a function that is defined within my controller. Here is what I am doing: (function () { 'use strict'; angular .module('app') .controller('myController', myController) .directive('fileDropzone', function () { return { restrict: 'A', scope: { file: '=', fileName: '=', test: '&callbackFn', }, link: function (scope, element, attrs) { var processDragOverOrEnter; processDragOverOrEnter = function (event) { if (event != null) { event.preventDefault(); } event

Get uploaded file from Dropzone

阅读更多关于 Get uploaded file from Dropzone

I have a Web API method to upload file and return FileResult object that contains file path. How can I get the file path of uploaded file in dropzone (how to get response from Web API method)? My dropzone: module.directive("dzDirective", [ 'apiAttachment', function(apiAttachment) { return { restrict: "A", link: function(scope, iElement, iAttrs, controller) { iElement.dropzone({ url:"/api/1/FileTransfer", uploadMultiple: false, init: function() { var myDropzone = this; myDropzone.on("complete", function (file) { DoSomething(); }); } }); } }; } ]); My Web Api method: [Route("api/1/FileTransfer")

Angular Dialog directives with Bootstrap 3

阅读更多关于 Angular Dialog directives with Bootstrap 3

问题 We're trying to migrate from Bootstrap 2.3.2 to Bootstrap 3 (RC1) and are having problems with the AngularJS Dialog directive. On clicking the relevant button no dialogue popup appears (the page appears black. Clicking anywhere returns to the original non-black view). We're essentially using exactly the same code as in the above link. There is a known issue discussed here. In that discussion Luther suggests: "to have modal worked, add hide class to set display:none to modal and reset the

AngularJS: how to bind a constant object to a directive

阅读更多关于 AngularJS: how to bind a constant object to a directive

问题 I've created a directive with a binding using "scope". In some cases, I want to bind a constant object. For instance, with HTML: <div ng-controller="Ctrl"> <greeting person="{firstName: 'Bob', lastName: 'Jones'}"></greeting> </div> and JavaScript: var app = angular.module('myApp', []); app.controller("Ctrl", function($scope) { }); app.directive("greeting", function () { return { restrict: "E", replace: true, scope: { person: "=" }, template: '<p>Hello {{person.firstName}} {{person.lastName}}<

Optional two-way binding on isolate scope for Angular Directive

阅读更多关于 Optional two-way binding on isolate scope for Angular Directive

问题 question I just learned that you can have an optional 'reverse' or callback binding via: scope: { parentScopeFunc: '&?' } I'm trying to see if there is a way to do something similar with the 2-way binding. scope: { optional2WayBoundProp: '=?' } I tried with the link function's element & attrs params but then I lose the 2-way-binding back to the parent. That method only allows for parent-to-child updates. Then I might as well just be using @ scope mechanism. edit I found this question Angular

Angular testing using passThrough in unit testing

阅读更多关于 Angular testing using passThrough in unit testing

问题 I'm trying to test a Directive in Angular, but I can't get the corresponding template to work. The directive lists the templateUrl like so templateUrl: 'directives/listview/view.html' Now when I write any unit-test, I get Error: Unexpected request: GET directives/listview/view.html So I have to use the $httpBackend and respond with something sensible like httpBackend.whenGET('directives/listview/view.html').respond("<div>som</div>"); But really I want to simply return the actual file, and

Access directive's isolate scope from within transcluded content

阅读更多关于 Access directive's isolate scope from within transcluded content

问题 I'm not sure if this is actually possible, but I'm essentially wanting a reverse of the '&' isolate scope in AngularJS. Here is a Plunkr to demonstrate. Basically, I have a custom directive set up that delivers some reusable HTML. It makes use of ng-transclude to allow some external content to be rendered within it. However, I have found a situation where I would like to access a function that has been set up on the isolate scope for the directive, from within the transcluded section of code.

AngularJS counter to count up to a target number

阅读更多关于 AngularJS counter to count up to a target number

I'm new to Angular, and would like to implement the same easy function extension in JQuery, but use directive (as far as i understand this is how it supposed to be done). does somone know ready implimentation? my search ended up only with JQuery solutions and i don't know how to convert it to Angular. this is what i needed to do: link to example: http://jsfiddle.net/YWn9t/ can you help? function declaration: $.fn.countTo.defaults = { from: 0, // the number the element should start at to: 100, // the number the element should end at speed: 1000, // how long it should take to count between the