angularjs-directive

问题 I am trying to create a file upload component, and display the text file contents in a textarea in the browser for editing before processing. My inputs looks like this <input type="file" process-file/> <textarea id="file-text" ng-model="fileContent"> </textarea> I have a directive that correctly reads the file contents app.directive('processFile', [function () { return { link: function (scope, element, attrs) { element.on('change', function (evt) { var files = evt.target.files; var reader =

问题 I'm using the following directive to detect when a click is made outside a div: app.directive('clickOut', function ($window, $parse) { return { restrict: 'A', link: function (scope, element, attrs) { var clickOutHandler = $parse(attrs.clickOut); angular.element($window).on('click', function (event) { if (element[0].contains(event.target)) return; clickOutHandler(scope, {$event: event}); scope.$apply(); }); } }; }); In this div: <div class="panel-body" click-out="closeMyPopup()"> <div class=

问题 This has come up for me in answers and generated some discussion and I'd like to figure out if I'm way off base or if there is a "more angular" way to accomplish my goal. When I write a directive that is going to use an isolated scope, a question that comes up is always =, & or @. Generally, people always think of & as a way to pass functions to directive. The documentation describes it as: a way to execute an expression in the context of the parent scope. If no attr name is specified then

问题 I'm trying to use ControllerAs in a directive with no $scope injection, using this instead, and I'm struggling when scope:true When I use an isolated scope everything works fine because I can use bindToController: true , but in this case I'm missing something and I don´t know what. I have this code. As you can see, I'm trying to print foo3 (from MyController) and foo4 (from MyDirectiveController) in my directive. This can be easily done using $scope injection in both controllers, but when I

问题 I have an <input> which holds my custom directive as an attribute and inside that attribute I give the ID of destination that will receive the text. At the moment I am doing the text change with jQuery but I would rather use the full Angular way...So it's kinda of a binding but from within a directive. To make it simple, I made a simple draft of my code: HTML Code <input type="text" name="input1" my-directive="message1" /> <span id="message1"></span> JS Code // Angular - custom Directive

问题 i have service for modal invoking as shown. .service('modalService', ['$modal', function ($modal) { var modalDefaults = { backdrop: 'static', keyboard: true, modalFade: true }; this.showModal = function (template) { modalDefaults.template = template; modalDefaults.controller = 'modalController'; return $modal.open(modalDefaults).result; }; }]) .controller('modalController', function ($scope, $modalInstance) { console.log('modalController'); $scope.ok = function () { $modalInstance.close(

问题 I'm making some reusable directives for my angular apps by putting them in a separate bower component. I would like to use a templateUrl for the directives so that I am not forced to do one of the three options in this post: How do I use separate templates with my angular directive bower package? Here is amoderate paraphrasing of the suggestions: 1 copy and past html in to the js file, 2 using grunt to compile the templates into js, or 3 put the templates in a different directory and have the

问题 I have a question with some page about item search. Let's say I have: A controller with result items to display A service that performs the search queries and interacts to the controller so it updates the result items to display A directive which has the form with all the inputs of the search fields. One of the buttons is a "View more items" button. It should only be shown if the response that I receive from a query tells me that there are more items to view. I made a function inside the

问题 DEMO To get the original HTML of the directive in the template function one could do: HTML: <div my-directive> <input type="text"> </div> JS: angular.module('App', []).directive('myDirective', function() { return { template: function(element) { console.log(element.html()); // Outputs <input type="text"> return '<div>Template</div>'; } }; }); But, when the directive has transclude: true , this method doesn't work anymore: angular.module('App', []).directive('myDirective', function() { return {

问题 I'm new to Angular and I'm trying to do some DOM calculations and manipulations from Directive using jQuery. What I've got however is wrong height of my element. In my case the element is something like container - so the height almost all the viewport height. directives.directive('responsiveAlerts', ['$log', '$window', function ($log, $window) { return { restrict: 'A', compile: function (element, attributes) { console.log($('.page').height()); } }; }]); I've got 46 as a height, which is